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; // 使用中间元素作为比较的基准值
const left = []; // 左分区
const right = []; // 右分区
const equal = []; // 等于基准点的元素
// 遍历给左右分区
for(let i = 0; i < arr.length; i++) {
const item = arr;
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 = ;
console.log(quickSort(tempArr)); //
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]