这段JavaScript递归代码输出不符合预期，请求原因解析

我预期代码输出结果为0, 1, 2, 3, 4，但实际输出为0,0,0,0,0,1,2,3,4,1……。请帮忙解释其中原因。

对应的代码如下：

function foo(iteration) {
  if (iteration === 5) {
    return;
  }
  for (let i = 0; i < 5; i++) {
    console.log(i);
    foo(iteration + 1);
  }
}
foo(0);

原因拆解：递归和循环的嵌套执行顺序搞反了 #

咱们一步一步捋清楚代码的执行流程，就能明白问题出在哪：

• 核心逻辑：循环每一步都立刻触发递归
  你写的代码是在for循环的每一次迭代里，先打印当前的i，然后马上调用foo(iteration+1)——这意味着，循环不会先完整跑完0到4再去递归，而是每打印一个i，就先钻进下一层递归里，把那层递归的所有逻辑执行完，才会回到当前循环的下一个i。

• 具体执行流程（简化版）

  1. 启动foo(0)，进入循环：
     • i=0：打印0，然后调用foo(1)
  2. 进入foo(1)，进入循环：
     • i=0：打印0，调用foo(2)
  3. 进入foo(2)，进入循环：
     • i=0：打印0，调用foo(3)
  4. 进入foo(3)，进入循环：
     • i=0：打印0，调用foo(4)
  5. 进入foo(4)，进入循环：
     • i=0：打印0，调用foo(5)——这时候iteration===5，直接返回，回到foo(4)的循环
     • 继续foo(4)的循环：i=1打印1，调用foo(5)返回；i=2打印2，返回；直到i=4打印4，循环结束，回到foo(3)的循环
  6. 回到foo(3)的循环，刚才停在i=0调用完foo(4)的位置，现在继续i=1：打印1，然后调用foo(4)（这时候又会重复foo(4)的整个循环逻辑，打印0、1、2、3、4）……

  这就导致你看到的输出是先连续5个0（来自foo(0)到foo(4)的i=0），然后是foo(4)循环的1、2、3、4，接着又出现foo(3)循环的i=1打印1，之后又会触发foo(4)的完整循环，以此类推。

• 和预期的差异点
  你的预期是“先跑完当前循环打印0-4，再执行递归”，但实际代码是“循环每一步都先打印i，再执行完整的递归调用”，两者的执行顺序完全不同，所以输出自然和预期不符。

内容的提问来源于stack exchange，提问作者Shobhit