倒计时函数中的递归如何工作

Question

我正在学习一些 JavaScript，但我很难理解 FreeCodeCamp 上有关递归倒计时的课程（链接）。

在课程中，有这个最初的例子。但我对它的运作方式感到困惑：

function countup(n) {
  if (n < 1) {
    return [];
  } else {
    const countArray = countup(n - 1);
    countArray.push(n);
    return countArray;
  }
}
console.log(countup(5));

我看到这个函数执行的步骤（按顺序），如下所示：

• n（开头是5）大于1，所以转到语句else。
• 在else语句中，我将countArray分配一个常量 () 给 do countup(n - 1)，即 4。
• js 遇到的下一个操作是countArray.push(n)，因此它将把 4 压入数组中。
• 然后它遇到return countArray，即 4。
• 该函数继续 3,2,1 直到基本条件达到n==0，在这种情况下，该函数结束返回一个空数组。

我知道这不是它的工作原理，我只是“描述”我的菜鸟思维如何看待这个递归函数。

我查看了练习的解决方案和其他人的解释，但我不明白为什么该函数不像我描述的那样工作，也不明白为什么在到达 后n==0，它开始填充一个从 1 到 5 计数的数组。

我想了解这一点。

Answer 1

意识到每次执行countup都会有自己的n和countArray变量。

它可能有助于形象化它。每个执行上下文都被可视化为一个“盒子”。当函数调用返回时，外框中的变量仍然存在。

最外面的框是由初始调用创建的执行上下文countup(5)：：

// n is 5 and does not change
const countArray = countup(n - 1);
+-------------------------------------------------------------------------------+
|  // n is 4 and does not change                                                |
|  const countArray = countup(n - 1);                                           |
|  +-------------------------------------------------------------------------+  |
|  |  // n is 3 and does not change                                          |  |
|  |  const countArray = countup(n - 1);                                     |  |
|  |  +-------------------------------------------------------------------+  |  |
|  |  |  // n is 2 and does not change                                    |  |  |
|  |  |  const countArray = countup(n - 1);                               |  |  |
|  |  |  +-------------------------------------------------------------+  |  |  |
|  |  |  |  // n is 1 and does not change                              |  |  |  |
|  |  |  |  const countArray = countup(n - 1);                         |  |  |  |
|  |  |  |  +-------------------------------------------------------+  |  |  |  |
|  |  |  |  |  // n is 0 and does not change                        |  |  |  |  |
|  |  |  |  |  return []; // the if-block is executed because n < 1 |  |  |  |  |
|  |  |  |  +-------------------------------------------------------+  |  |  |  |
|  |  |  |  // countArray is []                                        |  |  |  |
|  |  |  |  countArray.push(n); // n is still 1                        |  |  |  |
|  |  |  |  return countArray; // returns [1]                          |  |  |  |
|  |  |  +-------------------------------------------------------------+  |  |  |
|  |  |  // countArray is [1]                                             |  |  |
|  |  |  countArray.push(n); // n is still 2                              |  |  |
|  |  |  return countArray; // returns [1, 2]                             |  |  |
|  |  +-------------------------------------------------------------------+  |  |
|  |  // countArray is [1, 2]                                                |  |
|  |  countArray.push(n); // n is still 3                                    |  |
|  |  return countArray; // returns [1, 2, 3]                                |  |
|  +-------------------------------------------------------------------------+  |
|  // countArray is [1, 2, 3]                                                   |
|  countArray.push(n); // n is still 4                                          |
|  return countArray; // returns [1, 2, 3, 4]                                   |
+-------------------------------------------------------------------------------+
// countArray is [1, 2, 3, 4]
countArray.push(n); // n is still 5
return countArray; // returns [1, 2, 3, 4, 5]