javascript之循环保存数值
语言都是相通的,这句话在我学javascript时有的深刻的意识.js中的for循环与java中的for循环有很大相似之处.
先看下面这段代码
for(var i=0;i<a.length;i++){
a[i].onclick=function(){
console.log(i);
};
}
onclick为点击,第二行代码为当点击是发生的事件
在js中,假设我之前的代码都正确且a已经声明过,a.length为2,这时候的控制台输出是什么?
我之前以为应该是0,1.
然而控制台给出的结果是2.
这是js中常见的一个错误,经常发生.为什么?
分析:i=0,i<2,进入循环后,i++变为1
i=1,i<2,进入循环后,i++变为2
i=2,i<2不成立,不进入循环,此时i为2
当程序运行时,for循环以极其快的速度运行结束,i瞬间变为2.当我点击a[i]时,此时的事件才发生,而i已经为2.所以控制台输出为2
再看一段代码:
for(var i=0;i<a.length;i++){
a[i].onclick=function(){
console.log(a[i]);
};
}
还是像上面那样分析,
i=0,i<2,进入循环后,i++变为1
i=1,i<2,进入循环后,i++变为2
i=2,i<2不成立,不进入循环,此时i为2
当程序运行时,for循环以极其快的速度运行结束,i瞬间变为2.当我点击a[i]时,此时的事件才发生,而i已经为2.a[2]是不存在的,所以报错.
如果我想存储住这个i的数值，怎么样才能通过i的值来调用a[i],让控制台输出当前的a[i]的值？这个时候我们需要用一个属性来保存这个i的值，假设我设这个属性为index，那么这个代码怎么写呢？又应该如何来调用呢？再看下面这段代码
for(var i=0;i<a.length;i++){
a[i].index=i;
a[i].onclick=function(){
console.log(this.index);
};
}
运行之后的结果为我点击a[0]时控制台输出0，点击a[1]时控制台输出1.
通过以上的例子，我们能得知，要给a[i]一个属性来保存这个值以便调用，为什么这样？
a[i].index=i这句话我们可以这么理解
a[0].index=0
a[1].index=1
这就是我把每一个a[i]的index都给他一个值，这样当我想选择谁的时候，谁就可以被我选择。a[i]就是一个对象，index就是属性。
万物皆对象，对象是谁，你操纵谁，你控制谁。