递归和 Arrays。“return”实际上在这里做了什么？

Question

我目前正在学习 freeCodeCamp 的 JS 课程。

最后一个问题要求你创建一个递归的 function，它只接受一个参数n并创建一个从n到 1 的倒数数组。

我能够使用此代码解决问题（如果您也在解决此问题，请剧透）：

// Only change code below this line
function countdown(n) {
  if (n < 1) {
    return [];
  } else {
    const countArray = countdown(n - 1);
    countArray.unshift(n);
    return countArray;
  }
}
// Only change code above this line

// my test
console.log(countdown(1))

我主要是通过复制所提供示例中的语法来得出这个答案的。 我在这里将我的答案插入 Python 导师的代码可视化工具。 我将参考此可视化工具中的步骤。

关于第 3 步的问题：我注意到它说countArray (block 1) 未定义。 我认为这是因为 function 挂在n上，一旦基本语句创建它，go 会返回并填充数组吗？ 这是否意味着数组的定义被延迟到达到基本情况？

关于第 6 步的问题：我看到我的代码按预期工作，现在n为 0，基本情况被激活并且 function 返回一个空数组。 代码如何知道我想用countArray填充这个空数组？ 是什么将两者联系在一起。

第 7 步的问题：如果您只能回答我的一个问题，我希望是这个。 ：为什么在达到基本情况后（当 n = 0 时）function 仍然继续？ 根据我有缺陷的理解， return立即结束 function 。 按照这个逻辑，我的代码不应该做预期的事情。 它总是会倒数n ，然后无论如何返回一个空数组。

感谢您阅读我的问题。 如果我的想法在这里不够详细，请告诉我如何澄清。

Answer 1

递归 function 调用堆叠在前一个调用之上。
所以以countdown(2)为例，

1. n > 0 ，即运行else部分，保存countdown(1)返回的值。
2. 所以现在我们 go 到countdown(1) ，它把我们送到countdown(0) 。
3. 现在， countdown(0)返回一个空数组。
4. 从这里开始，我们运行countdown(1)的左侧部分，即countArray = [] ，这是我们从countdown(0)获得的
5. unshift表示在数组的开头推送值。 所以现在我们的数组是countArray=[1]
6. 我们将此值返回给countdown(2) （第一行）。 现在我们的countArray = [1]在我们最初的 function 调用中。
7. 然后我们再次运行左边的部分： countArray.unshift(2) -> [2, 1]
8. 最后，我们将它恢复为任何名称。

// Call Stack: 
countdown(2) -> countdown(1) -> countdown(0)

// return Stack: 
[2, 1] <- [1] <- []

奖金：下面是所需的 function 的一个衬垫

 const countdown = (n) => n? [n, ...countdown(n - 1)]: [] console.log(countdown(5))

Answer 2

在到达基本情况之前，不会创建数组。

当您调用 function 时，会创建一个具有自己的局部变量（称为堆栈帧）的新上下文。 您的可视化工具在右侧显示这些（“框架”）。

注意从第 3 步到第 4 步如何出现新框架。然后，当基本情况从第 6 步返回到第 7 步时，框架再次消失。 在评估基本情况之前，执行从中断的地方开始，唯一的区别是countArray的值是已知的。

return仅完成当前上下文，将中间结果返回到其父上下文。 基本上，每一层递归在这里都是独立的。