神奇的 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 让代码断点,利用断点来看执行顺序。
如下图:

逐步解析
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]