javascript百炼成仙第一章掌握JavaScript基础 1.9 循环遍历的奥妙

“小娃娃，我且问你，可否知道循环遍历的法术？”

“循环遍历，不就是for循环或者while循环吗，这有何难？”说着，叶小凡就随便打出一段代码：

for(var i=0;i<10;i++){console.log(i);
}

“嗯，你这用的是for循环。如果你希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。就好像你刚才写的，你想要重复用console.log输出一个什么东西，用for循环的确可行。那你可知while循环？”

叶小凡想了一下，说道：“while循环感觉和for循环差不多吧，就是语法上稍微有点区别。”说着，随手打出一段代码，将刚才的for循环改写成while循环。

var i = 0;
while(i < 100){console.log(i);i++;
}

“i++是自增运算符，表示把当前的变量自增一个单位。而++i和i++是有区别的，前者代表先自增一个单位，再运算，后者相反，是先运算，再++。但是由于这段代码中的i++是单独一行，没有对i进行使用，所以不管是++i还是i++，只要这句话执行完毕，i的值都会++。”

听到这里，就是叶老也满意地点了点头。

“小娃娃，看来你基础学得不错，那你说说while循环和for循环有什么区别吧，除了语法。”
“这…”叶小凡一时语噻。

“小娃娃，你且看好，你方才写的for循环有一个圆括号。圆括号里面有三个表达式，分别为var i=0 , i < 100还有i++。第一个语句是在循环开始之前执行的，var i=0的意思就是定义了一个变量i，是整数，初始的值为0。第二个语句是i < 100，这个表示进入循环体的条件。”

“循环体，就是那个用大括号扩起来的部分吗？”叶小凡问到。

for(var i=0;i<10;i++){console.log(i);
}

“没有错，不论是for循环还是while循环，循环体就是这个部分。这个部分里面的代码是需要被多次执行的。现在我再给你说说最后一个语句i++，这个语句是在刚才我们所说的大括号里面的代码被全部执行完之后才会被执行的。一般这个语句里面的代码就是控制循环变量i自增一个单位或者自减一个单位。”

“自增我知道，无非就是i++或者++i，为什么要自减呢？”

“关于这个问题，是和第二个语句相关联的。比如你刚才写的代码。”说着，叶老指向叶小凡刚才写的代码：

for(var i=0;i<10;i++){console.log(i);
}

“你的循环判断条件是当i小于10的时候，才会进入循环体。也就是后面用大括号扩起来的部分，对吧？”叶老问到。

“没错，最开始的时候i=0，第一次循环i自然是小于10的，于是就进入循环体，像这样。”说着，叶小凡催动内力，让这段JavaScript代码开始执行。

当执行到这一行代码的时候，叶小凡特意用debug让代码停止了下来。

“嗯，很好，我且问你，现在代码停在了这一行，如果我往下执行一部，会调到第四行还是停留在第三行呢？” 叶老问到。

“那还用问，肯定是调到第四行啦。”叶小凡不可置否地说道。

“先别着急下结论，走一步试试。”叶老平淡地对叶小凡说道。

“试就试。”

说着，叶小凡就用debug走了一步。结果发现：

“这是怎么回事？”叶小凡讶然，同时皱了皱眉。

“你再走一步试试？”叶老笑呵呵地说道。

就这样，叶小凡又走了一步，这才发现走到了第四行。经过反复地测试，叶小凡紧皱的眉头终于松开了。原来，第一次跳到第三行代码的时候，是在准备运行for循环的语句一，也就是var i = 0 这句话。因此，刚才第一次跳到第三行代码的时候，i变量的值是undefined（未定义），因为这个时候只是去声明了i变量，还没有运行 i = 0这个赋值语句，所以是undefined。

而当叶小凡往下再走一步的时候，则是运行了i = 0这个赋值语句，这个时候i变量的值才如愿以偿地变成了0，整个语句一才算是执行完毕了。至于为什么再走一步就能够跳转到第四行代码？那是因为，语句一执行完毕后，自然去执行语句二了。也就是“i<10”这句话，这就好比是一个if判断：

var i = 0;
if(i < 10){console.log(i);
}

第一次循环的时候，i=0自然是小于10的，因此就直接进入了循环体。循环体执行完毕后，开始执行语句三，i++，i从0变成了1，然后进入第二次循环再次判断i是否小于10。

听着叶小凡的论述，叶老微微点了点头，道：“是这样的，那么问题来了，刚才的例子中，i是从0一直自增到10，当然，它最后会变成10，但是却无法再满足i<10的判断条件。所以，当i等于10的时候，就没办法进入循环体了。可是，这并没有关系，因为第一次i等于0，是符合条件的，最后一次进入循环体，是当i等于9的时候，像这样。”说完，叶老随手一挥，将这段代码的运行结果显示了出来：

“嗯嗯，我明白了，因为i变量是从0开始的，所以0~9还是循环了10次。至于刚才说的自减，其实也是一样的，只是改变一下循环条件和初始化变量i的值就行了。”
说完，叶小凡修改了一下代码：

for(var i=10;i>0;i--){console.log(i);
}

“同样是循环10次，这回就是变量i从10减到0的过程了。”叶小凡说到。
“没有错，是这样的。while循环的话，只是语法上有所不同，作用上和for循环是一样的。很好，看来你已经掌握了循环的奥妙。”

小结：

For 循环
for 循环是您在希望创建循环时常会用到的工具。就是说，如果某一段代码你需要多次执行，如果不用循环，则需要将相同的代码重复多遍。
下面是 for 循环的语法：

for (语句 1; 语句 2; 语句 3){被执行的代码块}
语句 1 在循环（代码块）开始前执行
语句 2 定义运行循环（代码块）的条件
语句 3 在循环（代码块）已被执行之后执行while 循环While 循环会在指定条件为真时循环执行代码块。语法while (条件)
{需要执行的代码
}

javascript百炼成仙第一章掌握JavaScript基础 1.9 循环遍历的奥妙相关推荐

javascript百炼成仙第一章掌握JavaScript基础1.6 叶老
这一日,叶小凡来到青山院附近的小山上修炼,忽然,被一块石头绊了一跤.正在他自认倒霉打算爬起来的时候,在石头缝里边发现了一枚古怪的戒指.戒指通体呈现一种枯黄色,似有一些年代悠久之感. "摔了一 ...
javascript百炼成仙第一章掌握JavaScript基础01 初入宗门
前些天发现了一个巨牛的人工智能学习博客,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转乐阳村,处于脚本大陆东部的边缘地带,民风淳朴,村民日出而作,日落而息.这一日清晨,所有村民来到村庄的门口,正 ...
javascript百炼成仙第一章掌握JavaScript基础1.8 对象的取值
"小娃娃,我现在问你,如果我事先不知道对象的某个属性叫什么,那又该怎么访问对象中对应这个属性的值呢?"叶老笑呵呵地问到. "什么什么,事先都不知道对象的属性名称,那怎么可 ...
javascript百炼成仙第一章掌握JavaScript基础1.4数据类型
修行还在继续,随着对要诀的深入,叶小凡明白,在编程世界,刚才的直接量都属于一种数据.和人有男女一样,数据也是有类型的. 在JavaScript中,数据可分为两类,分别为原生数据类型(primitive ...
javascript百炼成仙第一章掌握JavaScript基础1.7 对象数据类型
听到这句话,叶小凡一顿,动作停止了下来. 对象数据类型,这在JavaScript基础修炼要诀中只是提了一下,但是并没有细讲,这个对象数据类型一直以来都深深地勾起了叶小凡的好奇心. "小娃娃, ...
javascript百炼成仙第一章掌握JavaScript基础1.5基础考核
叶小凡兴奋,那种钻研了很久之后猛地豁然开朗,感觉实在是太爽了.乘着心情大好,叶小凡继续钻研"JavaScript基础修炼要诀",一晃半天时间过去了.叶小凡性格谨慎,也非常刻苦,有很 ...
javascript百炼成仙第一章掌握JavaScript基础 1.2直接量
前些天发现了一个巨牛的人工智能学习博客,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转叶小凡的住处被安排在青山院西北角的一个房间里,虽不宽敞,倒也干净.叶小凡两眼露出振奋的眼神,随便吃了点乡亲们 ...
javascript百炼成仙第一章掌握JavaScript基础 1.12 JavaScript运算符
题目一出,真是几家欢喜几家愁,那些复习得好的,自然可以款款而谈,可是那些本身基础就薄弱的弟子,立刻尴尬地说不出话来.甚至有的弟子已经举双手表示要放弃比赛.这些举动立刻引来了场外那些大弟子的哄笑.尤其是 ...
javascript百炼成仙第一章掌握JavaScript基础1.3变量的声明
叶小凡收起心神,继续阅读"JavaScript基础修炼要诀",忽然,他眼前一亮. "原来如此,直接量虽然只是昙花一现,但是如果我能用var定义一个变量,再指向那个直接量, ...

javascript百炼成仙第一章掌握JavaScript基础 1.9 循环遍历的奥妙

小结：

javascript百炼成仙第一章掌握JavaScript基础 1.9 循环遍历的奥妙相关推荐

最新文章

热门文章

javascript百炼成仙 第一章 掌握JavaScript基础 1.9 循环遍历的奥妙

小结：

javascript百炼成仙 第一章 掌握JavaScript基础 1.9 循环遍历的奥妙相关推荐

最新文章

热门文章

javascript百炼成仙第一章掌握JavaScript基础 1.9 循环遍历的奥妙

javascript百炼成仙第一章掌握JavaScript基础 1.9 循环遍历的奥妙相关推荐