当前位置:秋叶网络博客 前端编程 ◊ 理解js中的for循环

理解js中的for循环

作者:秋叶 发表时间:2015年12月18日

for循环的理解可以这样理解:每满足里面的条件一次就执行一遍里面的代码,它的速度是非常快的,你对它的理解不应该有时间观念;应该把每个循环看成一个整体,瞬间完成,这样就不会纠结理解上。它的理解类似setInterval

举个栗子来理解:

var iNum=0;
outermost:
for (var i=0; i<10; i++) {
for (var j=0; j<10; j++) {
if (i == 5 && j == 5) {
break outermost;
}
iNum++;
}
}
alert(iNum);

最终会弹出什么呢?很明显会弹出55,为什么?顺着for循环的执行就能水露石出了。

这里有两个for循环,我暂且叫外层for循环为外甥,内循环叫内甥
当i=0的时候,执行内甥j=0,内甥有个判断,如果i=j=5,就跳出外甥循环;
然而这时候是不成立的,所以它会继续执行内甥,即j=1,且iNum++=1;...

一直到j循环完毕,都不成立,因为i始终为0,但是这时iNum已经是10了;
j循环完毕后又从外甥开始,这时候i=1,再执行内甥,这时候内甥又从j=0开始到j=9又执行10次,条件依旧不成立,这时iNum已经是20了...

当外甥执行到i=4的时候,条件依旧不成立,此时iNum已经是50了。。。
接着外甥的i=5时,执行内甥从j=0开始到j=4这段时间,条件都不成立,iNum已经是55了;
因为,
j=4的时候,j<10所以还需再执行一遍内甥,j就为5了,然后再执行判断if (i == 5 && j == 5),条件完全吻合,不再执行,跳出外甥,外甥都跳出了内甥自然也就跳出了。后面的iNum++是不执行的,即iNum还是55
最后的结果就是55。

for循环可理解为:

var i=0;
if( i<myp.length;) {
fn();
i++
}

在来看一个典型的for循环误区:

var myp=document.getElementsByTagName("p");
for (var i=0; i<myp.length; i++) {
myp[i].onclick=function(){
alert(i);
}
}

这段代码意图是:页面中有5个p元素,每点击一个屁元素就弹出它的索引值。然而这只是妄想,无论你点击哪个p都弹出5。

实际上在for循环过程中你并没有触发事件,当你触发事件的时候,for循环早就结束了,此时已经创建了全局变量i并且值为5,所以无论你点哪个都是弹出全局变量i的值。

转载请保留链接:理解js中的for循环 | 出处:秋叶个人博客| 本文链接地址:http://www.mizuiren.com/421.html
目录: 前端编程 | 6979次阅读