递归和数组。 \'return\' 在这里实际上做了什么？答案

【问题标题】：Recursion and Arrays. What does 'return' actually do here?递归和数组。 \'return\' 在这里实际上做了什么？
【发布时间】：2023-01-26 22:31:04
【问题描述】：

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

最后一个问题要求您创建一个只接受一个参数 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 Tutor 的代码可视化工具here。我将参考此可视化工具中的步骤。

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

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

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

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

【问题讨论】：

总的来说，开始熟悉 using a debugger 听起来你会受益匪浅。当您在调试器中单步执行代码时，哪个操作首先会产生意外结果？该操作中使用的值是什么？结果如何？预期的结果是什么？为什么？
在代码中添加控制台语句，这样您就可以看到它做了什么。

标签： javascript arrays recursion stack

【解决方案1】：

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

n > 0，即运行保存值的else部分回来通过countdown(1)。
现在我们转到countdown(1)，它将我们发送到countdown(0)。
现在，countdown(0) 返回一个空数组。
从这里开始，我们运行countdown(1)的剩余部分，即countArray = []，我们从countdown(0)获得
unshift 表示在数组开头推送值。所以现在我们的数组是countArray=[1]
我们将这个值返回给countdown(2)（第一行）。现在我们的countArray = [1] 正在我们的初始函数调用中。
然后我们再次运行剩下的部分：countArray.unshift(2) -> [2, 1]

最后我们将它返回到任何调用它的地方。

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

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

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

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

【讨论】：