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

“小娃娃，我且问你，可否知道循环遍历的法术？”
“循环遍历，不就是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，为什么要自减呢？”
【JavaScript百炼成仙|javascript百炼成仙第一章掌握JavaScript基础 1.9 循环遍历的奥妙】“关于这个问题，是和第二个语句相关联的。比如你刚才写的代码。”说着，叶老指向叶小凡刚才写的代码：

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

“你的循环判断条件是当i小于10的时候，才会进入循环体。也就是后面用大括号扩起来的部分，对吧？”叶老问到。
“没错，最开始的时候i=0，第一次循环i自然是小于10的，于是就进入循环体，像这样。”说着，叶小凡催动内力，让这段JavaScript代码开始执行。
当执行到这一行代码的时候，叶小凡特意用debug让代码停止了下来。

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

文章图片

“嗯，很好，我且问你，现在代码停在了这一行，如果我往下执行一部，会调到第四行还是停留在第三行呢？” 叶老问到。
“那还用问，肯定是调到第四行啦。”叶小凡不可置否地说道。
“先别着急下结论，走一步试试。”叶老平淡地对叶小凡说道。
“试就试。”
说着，叶小凡就用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 (条件) { 需要执行的代码 }