Web前端入门第 63 问:JavaScript 图解 for 循环执行顺序

神奇的 for 循环代码执行顺序并不是按照代码书写顺序执行,这就导致在看很多程序算法的时候,会有那么一点打脑壳。

for 语法

for 循环的语法很简单,重点是小括号里面的三个部分,这三部分的执行顺序对于不太懂程序的兄弟来说,可以把人晃晕~

for (初始化; 条件; 增量) {   // 循环体 } 

初始化 部分仅在进入循环时候执行,条件 部分会在每次循环开始时执行,增量 部分在每次循环最后执行。

语言乏力,下面看图解。

图解

先看这么一段代码:

console.log('start') for (   let i = 0;   i < 3;   i++ ) {   console.log(i); } console.log('end') 

对于代码输出,一口都可以说出来:

start 0 1 2 end 

但对于代码的执行顺序,就不太好说了~~

先加一个 debugger 让代码断点,利用断点来看执行顺序。

如下图:

Web前端入门第 63 问:JavaScript 图解 for 循环执行顺序

逐步解析

1、程序进入断点。
2、执行了 console.log('start'),输出打印 start。

【3、4、5、6】第一次循环
3、执行初始化语句 let i = 0,变量 i 赋值 0 作为初始条件。
4、执行条件判断 i < 3,i=0 小于 3,进入循环体。
5、执行循环体 console.log(i),输出打印 0。
6、执行增量语句 i++,i 变为 1。

【7、8、9】第二次循环
7、执行条件判断 i < 3,i=1 小于 3,再次进入循环体。
8、执行循环体 console.log(i),输出打印 1。
9、执行增量语句 i++,i 变为 2。

【10、11、12】第三次循环
10、执行条件判断 i < 3,i=2 小于 3,继续进入循环体。
11、执行循环体 console.log(i),输出打印 2。
12、执行增量语句 i++,i 变为 3。

13、开始第四次循环判断 i < 3,由于 i=3 已经不小于 3,所以循环终止。
14、执行 console.log('end') ,输出打印 end,整个代码段结束。

可以看到,增量语句是在每次循环体执行完之后再执行的,其执行顺序与书写顺序是不相关的!

for 变体

根据上面的执行顺序,可以推断 for 循环其实是可以改变写法的,小括号中的三部分都可以省略。

1、省略初始化语句

let i = 0; for (; i < 3; i++) {   console.log(i); } console.log('end') 

2、省略条件判断语句

for (let i = 0; ; i++) {   if (i >= 3) {     break;   }   console.log(i); } console.log('end') 

3、省略增量语句

for (let i = 0; i < 3; ) {   console.log(i);   i++; } console.log('end') 

4、省略所有语句

let i = 0; for (;;) {   if (i >= 3) {     break;   }   console.log(i);   i++; } console.log('end') 

虽然省略这些条件的代码有些奇葩,但语法规则又允许这么写,那么就有必要了解下这些变体写法,以防拿到这样的代码之后就懵了~~

写在最后

单个 for 循环很简单,但算法中的循环可不止一个,层层嵌套下来之后,再叠加上递归 Buff,那代码看起来就打脑壳了,所以搞算法的大佬们都值得膜拜~~

分享一个数组快速排序的代码,验证下代码阅读能力:

function quickSort(arr) {     // 数组小于 1 不用排序,直接返回即可     if(arr.length <= 1) {       return arr;     }           const p = arr[Math.floor(arr.length / 2)]; // 使用中间元素作为比较的基准值     const left = []; // 左分区     const right = []; // 右分区     const equal = []; // 等于基准点的元素           // 遍历给左右分区     for(let i = 0; i < arr.length; i++) {       const item = arr[i];       if(item < p) {         // 小于基准点放在左边         left.push(item)       }else if (item > p) {         // 大于基准点方在右边         right.push(item)       } else {         equal.push(item)       }     }     // 合一并且对左右分区,递归处理     return quickSort(left).concat(equal, quickSort(right)) }   // 使用 const tempArr = [3, 6, 8, 10, 1, 2, 1]; console.log(quickSort(tempArr)); // [1, 1, 2, 3, 6, 8, 10] 

发表评论

评论已关闭。

相关文章