关于javascript数组与循环的一个小问题。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于javascript数组与循环的一个小问题。相关的知识，希望对你有一定的参考价值。
for循环遍历数组arr[]并存取3个div的offsetWidth，鼠标移入第一个div，让它的width变成arr[i]中相对应的width，程序报错：参数无效；
<html><head><title></title>
<style type='text/css'>
#div1width:100px;height:50px;background:red;margin:50px;
#div2width:200px;height:50px;background:green;margin:50px;
#div3width:300px;height:50px;background:blue;margin:50px;
</style>
<script language='javascript'>
window.onload=function ()
var odiv1=document.getElementById('div1');
var adiv=document.getElementsByTagName('div');
var arr=[];
for (var i=0;i<adiv.length;i++)
arr[i]=adiv[i].offsetWidth;
arr[i].index=i;
adiv[i].onmouseover=function ()
this.style.width=arr[i]+'px';//问题在这，arr[i]无法正确被读取；
</script>
</head>
<body>
<div id='div1'>
</div>
<div id='div2'>
</div>
<div id='div3'>
</div>
</body>
</html>
求解惑
var odiv1=document.getElementById('div1');
var adiv=document.getElementsByTagName('div');
var arr=[];
for (var i=0;i<adiv.length;i++)
arr[i]=adiv[i].offsetWidth;
arr[i].index=i;
adiv[i].onmouseover=(function(i)
var thas = this;
return function (i)
// 按你的写法i始终是arr.length - 1;
thas.style.width=arr[i]+'px';
;
)(i);
追问
你的没问题 不过方法有点复杂啊
有没有简单点的
这已经最简单了，只是加了个闭包而已，你可以自己封装一下，方便调用
Function.prototype.bind = function()var oThis = this,
args = Array.prototype.slice.call(arguments),
obj = args.shift();
return function ()
oThis.apply(obj, args);
;
adiv[i].onmouseover = function( index )
thas.style.width = arr[ index ] + 'px';
.bind(adiv[i], i); 参考技术B arr[i].index=i;改为adiv[i].index=i;
adiv[i].onmouseover=function ()
this.style.width=arr[i]+'px';//问题在这，arr[i]无法正确被读取；
把arr[i]+'px'换成arr[this.index]+'px'追问
这个真好使
本回答被提问者采纳 参考技术C this.style.width=arr[i]+'px';//问题在这，arr[i]无法正确被读取；这里鼠标移进去的时候已经没有i了,所以取不到值的 参考技术D 报错了吗？木有问题啊关于Javascript的学习心得
目录
前言
对于学习过程中，每天的状态都是在“十万个为什么”中度过🤯每天都是再头脑风暴~但学习嘛，就是一个从什么都不会到慢慢能摸索懂再理解最后能够掌握后灵活应用的过程嘛~
下面我从自己的学习方法和学习框架来简单梳理以下对于Javascript的学习内容，分别是从Javascript的流程控制、数组两大块。
Javascript流程控制
顺序结构
顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的。
分支结构
if语句
语句可以理解为一个行为，循环语句和分支语句就是典型的语句。一个程序由很多个语句组成，一般情况下，会分割成一个一个的语句。
语法结构：
// 条件成立执行代码，否则什么也不做
if (条件表达式)
// 条件成立执行的代码语句
if else语句
语法结构：
// 条件成立 执行 if 里面代码，否则执行else 里面的代码
if (条件表达式)
// [如果] 条件成立执行的代码
else
// [否则] 执行的代码
注意：区分if 和 if else 的使用差别！！
if else if语句
语法结构：
// 适合于检查多重条件。
if (条件表达式1)
语句1；
else if (条件表达式2)
语句2；
else if (条件表达式3)
语句3；
....
else
// 上述条件都不成立执行此处代码
switch语句
switch 语句也是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用 switch。
语法结构：
switch( 表达式 )
case value1:
// 表达式 等于 value1 时要执行的代码
break;
case value2:
// 表达式 等于 value2 时要执行的代码
break;
default:
// 表达式 不等于任何一个 value 时要执行的代码
注意：
-
关键字 switch 后面括号内可以是表达式或值， 通常是一个变量
-
关键字 case , 后跟一个选项的表达式或值，后面跟一个冒号
-
switch 表达式的值会与结构中的 case 的值做比较
-
如果存在匹配全等(===) ，则与该 case 关联的代码块会被执行，并在遇到 break 时停止，整个 switch 语句代码执行结束
-
如果所有的 case 的值都和表达式的值不匹配，则执行 default 里的代码
-
执行case 里面的语句时，如果没有break，则继续执行下一个case里面的语句。
三元表达式
语法结构：
表达式1 ? 表达式2 : 表达式3;执行思路
-
如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值
-
简单理解： 就类似于 if else （双分支） 的简写
代码理解：
var num = 0;
var result = num > 5 ? 'Yes Yes' : '达咩！'
console.log(result);循环结构
for循环
for 循环重复相同的代码
语法结构：
// 基本写法
for(var i = 1; i <= 10; i++)
console.log('老婆我错了~');
// 用户输入次数
var num = prompt('请输入次数:')；
for ( var i = 1 ; i <= num; i++)
console.log('老婆我错了~');
for 循环重复不相同的代码
语法结构：
// for 里面是可以添加其他语句的
for (var i = 1; i <= 100; i++)
if (i == 1)
console.log('这个人今年1岁了， 它出生了');
else if (i == 100)
console.log('这个人今年100岁了，它死了');
else
console.log('这个人今年' + i + '岁了');
//就是再输出的时候用变量i 就能有变化双重for循环
语法结构：
for (外循环的初始; 外循环的条件; 外循环的操作表达式)
for (内循环的初始; 内循环的条件; 内循环的操作表达式)
需执行的代码;
注意：
-
内层循环可以看做外层循环的循环体语句
-
内层循环执行的顺序也要遵循 for 循环的执行顺序
-
外层循环执行一次，内层循环要执行全部次数
例题解析
例题1：打印出正三角的星星
var str='';
for(var i=1;i<=10;i++)
for(var j=1;j<i;j++)
str + ='⭐';
str + ='\\n';
console.log(str);例题2：打印出九九乘法表
var str = '';
for (var i = 1; i <= 9; i++)
for (var j = 1; j <= i; j++) //列数小于等于行数
// str += '⭐';追加字符串
str += j + 'X' + i + '=' + i * j; //变量和字符串之间用+ 连接
str += j + 'x' + i + '=' + i * j + '\\t';
str = str + '\\n';
console.log(str);例题3：倒计时效果 “补零”
var time = prompt('请输入一个0~59之间的一个数？');
var result = time < 10 ? '0' + time : time;
alert(result);while循环
语法结构：
while (条件表达式)
// 循环体代码
注意：
使用 while 循环时一定要注意，它必须要有退出条件，否则会成为死循环。
do...while循环
语法结构：
do
// 循环体代码 - 条件表达式为 true 时重复执行循环体代码
while(条件表达式);注意：
先再执行循环体，再判断，do…while循环语句至少会执行一次循环体代码。
循环结构中的终止程序——continue、break
continue 关键字用于立即跳出本次循环，继续下一次循环（本次循环体中 continue 之后的代码就会少执行一次）；
break 关键字用于立即跳出整个循环（循环结束）。
Javascript数组介绍
简单来说数组就是一组数据的集合，其中里面每个数据被称作元素，再数组中可以存放任意类型的元素。
存放的数组元素可以存放任意类型的数据，例如字符串、数字、布尔值等。
举例：
var arrStus = ['小白',12,true,28.9];创建数组
利用 new 创建数组（不常用）
语法结构：
var 数组名 = new Array() ；
var arr = new Array(); // 创建一个新的空数组注意： Array () ，A 要大写
利用数组字面量创建数组
语法结构：
//1. 使用数组字面量方式创建空的数组
var 数组名 = []；
//2. 使用数组字面量方式创建带初始值的数组
var 数组名 = ['小白','小黑','大黄','瑞奇'];获取（访问）数组
索引 (下标) 的定义：用来访问数组元素的序号（数组下标从 0 开始）。
索引 (下标) 的作用：数组可以通过索引来访问、设置、修改对应的数组元素，可以通过“数组名[索引]”的形式来获取数组中的元素。
语法结构：
// 定义数组
var arrStus = [1,2,3];
// 获取数组中的第2个元素
alert(arrStus[1]); 遍历数组
数组遍历
定义：把数组中的每个元素从头到尾都访问一次（类似学生的点名），可以通过 for 循环索引遍历数组中的每一项。
语法结构：
var arr = ['red','green', 'blue'];
for(var i = 0; i < arr.length; i++)
console.log(arrStus[i]);
数组的长度
数组的长度：默认情况下表示数组中元素的个数
使用“数组名.length”可以访问数组元素的数量（数组长度）。
语法结构：
var arrStus = [1,2,3];
alert(arrStus.length); // 3注意：
- 此处数组的长度length是数组元素的个数 ，不要和数组的索引号混淆。
-
当我们数组里面的元素个数发生了变化，这个 length 属性跟着一起变化
-
数组的length属性可以被修改：
-
如果设置的length属性值大于数组的元素个数，则会在数组末尾出现空白元素；
-
如果设置的length属性值小于数组的元素个数，则会把超过该值的数组元素删除
数组中新增元素
- 增长数组的长度
代码展示：
var arr = ['red', 'green', 'blue'];
arr.length = 4; //直接把数组长度修改为5 里面就会有5个元素
console.log(arr);
console.log(arr[4]); //undefined
console.log(arr[5]); //undefined- 直接修改索引号 追加数组元素
代码展示：
var arr1 = ['red', 'green', 'blue'];
arr1[3] = 'yellow'; //数组后面增加了yellow
console.log(arr1);
arr1[2] = 'pink';
console.log(arr1); //将arr[2]=blue改位pink了
arr1 = '把整个数组都改成这个名字，里面的元素全都没有了';
//不要直接给 数组名赋值 否则里面的数组元素就都没有了
console.log(arr1);Ending~
这是简单的梳理，在后面等博主我深入学习了，就能看到更多效果咯~
以上是关于关于javascript数组与循环的一个小问题。的主要内容，如果未能解决你的问题，请参考以下文章
关于循环和数组的练习 - 使用循环 1 次以及如何获取数组的最大值