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

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

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

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

复制代码

初始化 部分仅在进入循环时候执行，条件 部分会在每次循环开始时执行，增量 部分在每次循环最后执行。
语言乏力，下面看图解。
图解

先看这么一段代码：

1. console.log('start')
2. for (
3.   let i = 0;
4.   i < 3;
5.   i++
6. ) {
7.   console.log(i);
8. }
9. console.log('end')

复制代码

对于代码输出，一口都可以说出来：

1. start
2. 0
3. 1
4. 2
5. 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、省略初始化语句

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

复制代码

2、省略条件判断语句

1. for (let i = 0; ; i++) {
2.   if (i >= 3) {
3.     break;
4.   }
5.   console.log(i);
6. }
7. console.log('end')

复制代码

3、省略增量语句

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

复制代码

4、省略所有语句

1. let i = 0;
2. for (;;) {
3.   if (i >= 3) {
4.     break;
5.   }
6.   console.log(i);
7.   i++;
8. }
9. console.log('end')

复制代码

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

单个 for 循环很简单，但算法中的循环可不止一个，层层嵌套下来之后，再叠加上递归 Buff，那代码看起来就打脑壳了，所以搞算法的大佬们都值得膜拜~~
分享一个数组快速排序的代码，验证下代码阅读能力：

1. function quickSort(arr) {
2.     // 数组小于 1 不用排序，直接返回即可
3.     if(arr.length <= 1) {
4.       return arr;
5.     }
6.      
7.     const p = arr[Math.floor(arr.length / 2)]; // 使用中间元素作为比较的基准值
8.     const left = []; // 左分区
9.     const right = []; // 右分区
10.     const equal = []; // 等于基准点的元素
11.      
12.     // 遍历给左右分区
13.     for(let i = 0; i < arr.length; i++) {
14.       const item = arr[i];
15.       if(item < p) {
16.         // 小于基准点放在左边
17.         left.push(item)
18.       }else if (item > p) {
19.         // 大于基准点方在右边
20.         right.push(item)
21.       } else {
22.         equal.push(item)
23.       }
24.     }
25.     // 合一并且对左右分区，递归处理
26.     return quickSort(left).concat(equal, quickSort(right))
27. }
29. // 使用
30. const tempArr = [3, 6, 8, 10, 1, 2, 1];
31. console.log(quickSort(tempArr)); // [1, 1, 2, 3, 6, 8, 10]

复制代码

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！