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 让代码断点，利用断点来看执行顺序。

如下图：

逐步解析

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]