神奇的 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]