javascript之循环保存数值

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就是属性。

万物皆对象，对象是谁，你操纵谁，你控制谁。