晨雾中的牧羊人 發表於 2025-6-4 10:29:00

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

<p>神奇的 for 循环代码执行顺序并不是按照代码书写顺序执行，这就导致在看很多程序算法的时候，会有那么一点打脑壳。</p>
<h2 id="for-语法">for 语法</h2>
<p>for 循环的语法很简单，重点是小括号里面的三个部分，这三部分的执行顺序对于不太懂程序的兄弟来说，可以把人晃晕~</p>
<pre><code class="language-js">for (初始化; 条件; 增量) {
// 循环体
}
</code></pre>
<p><code>初始化</code> 部分仅在进入循环时候执行，<code>条件</code> 部分会在每次循环开始时执行，<code>增量</code> 部分在每次循环最后执行。</p>
<p>语言乏力，下面看图解。</p>
<h2 id="图解">图解</h2>
<p>先看这么一段代码：</p>
<pre><code class="language-js">console.log('start')
for (
let i = 0;
i &lt; 3;
i++
) {
console.log(i);
}
console.log('end')
</code></pre>
<p>对于代码输出，一口都可以说出来：</p>
<pre><code class="language-js">start
0
1
2
end
</code></pre>
<p>但对于代码的执行顺序，就不太好说了~~</p>
<p>先加一个 <code>debugger</code> 让代码断点，利用断点来看执行顺序。</p>
<p>如下图：</p>
<p><img src="https://img2024.cnblogs.com/blog/596097/202506/596097-20250604102727381-1098638999.png"></p>
<h3 id="逐步解析">逐步解析</h3>
<p>1、程序进入断点。<br>
2、执行了 <code>console.log('start')</code>，输出打印 start。</p>
<p>【3、4、5、6】第一次循环<br>
3、执行初始化语句 <code>let i = 0</code>，变量 i 赋值 0 作为初始条件。<br>
4、执行条件判断 <code>i &lt; 3</code>，i=0 小于 3，进入循环体。<br>
5、执行循环体 <code>console.log(i)</code>，输出打印 0。<br>
6、执行增量语句 <code>i++</code>，i 变为 1。</p>
<p>【7、8、9】第二次循环<br>
7、执行条件判断 <code>i &lt; 3</code>，i=1 小于 3，再次进入循环体。<br>
8、执行循环体 <code>console.log(i)</code>，输出打印 1。<br>
9、执行增量语句 <code>i++</code>，i 变为 2。</p>
<p>【10、11、12】第三次循环<br>
10、执行条件判断 <code>i &lt; 3</code>，i=2 小于 3，继续进入循环体。<br>
11、执行循环体 <code>console.log(i)</code>，输出打印 2。<br>
12、执行增量语句 <code>i++</code>，i 变为 3。</p>
<p>13、开始第四次循环判断 <code>i &lt; 3</code>，由于 i=3 已经不小于 3，所以循环终止。<br>
14、执行 <code>console.log('end')</code> ，输出打印 end，整个代码段结束。</p>
<p>可以看到，增量语句是在每次循环体执行完之后再执行的，其执行顺序与书写顺序是不相关的！</p>
<h2 id="for-变体">for 变体</h2>
<p>根据上面的执行顺序，可以推断 for 循环其实是可以改变写法的，小括号中的三部分都可以省略。</p>
<p>1、省略初始化语句</p>
<pre><code class="language-js">let i = 0;
for (; i &lt; 3; i++) {
console.log(i);
}
console.log('end')
</code></pre>
<p>2、省略条件判断语句</p>
<pre><code class="language-js">for (let i = 0; ; i++) {
if (i &gt;= 3) {
    break;
}
console.log(i);
}
console.log('end')
</code></pre>
<p>3、省略增量语句</p>
<pre><code class="language-js">for (let i = 0; i &lt; 3; ) {
console.log(i);
i++;
}
console.log('end')
</code></pre>
<p>4、省略所有语句</p>
<pre><code class="language-js">let i = 0;
for (;;) {
if (i &gt;= 3) {
    break;
}
console.log(i);
i++;
}
console.log('end')
</code></pre>
<p>虽然省略这些条件的代码有些奇葩，但语法规则又允许这么写，那么就有必要了解下这些变体写法，以防拿到这样的代码之后就懵了~~</p>
<h2 id="写在最后">写在最后</h2>
<p>单个 for 循环很简单，但算法中的循环可不止一个，层层嵌套下来之后，再叠加上递归 Buff，那代码看起来就打脑壳了，所以搞算法的大佬们都值得膜拜~~</p>
<p>分享一个数组快速排序的代码，验证下代码阅读能力：</p>
<pre><code class="language-js">function quickSort(arr) {
    // 数组小于 1 不用排序，直接返回即可
    if(arr.length &lt;= 1) {
      return arr;
    }
   
    const p = arr; // 使用中间元素作为比较的基准值
    const left = []; // 左分区
    const right = []; // 右分区
    const equal = []; // 等于基准点的元素
   
    // 遍历给左右分区
    for(let i = 0; i &lt; arr.length; i++) {
      const item = arr;
      if(item &lt; p) {
      // 小于基准点放在左边
      left.push(item)
      }else if (item &gt; p) {
      // 大于基准点方在右边
      right.push(item)
      } else {
      equal.push(item)
      }
    }
    // 合一并且对左右分区，递归处理
    return quickSort(left).concat(equal, quickSort(right))
}

// 使用
const tempArr = ;
console.log(quickSort(tempArr)); //
</code></pre>


</div>
<div id="MySignature" role="contentinfo">
    <p>&nbsp;</p>
<p style="font-size: 18px;font-weight: bold;">文章首发于微信公众号【<span style="color:rgb(255, 71, 87)">前端路引</span>】，欢迎 <span style="color:#4ec259">微信扫一扫</span> 查看更多文章。</p>
<p>
<img style="max-width: 320px;" src="https://images.cnblogs.com/cnblogs_com/linx/2447020/o_250228035031_%E5%85%AC%E4%BC%97%E5%8F%B7%E4%BA%8C%E7%BB%B4%E7%A0%81.png"/>
</p>
<p>本文来自博客园，作者：前端路引，转载请注明原文链接：https://www.cnblogs.com/linx/p/18909644</p>
<p>&nbsp;</p><br><br>
来源：https://www.cnblogs.com/linx/p/18909644
頁: [1]
查看完整版本: Web前端入门第 63 问：JavaScript 图解 for 循环执行顺序