什么时候在 Javascript 中设置调用堆栈？

如何解决什么时候在 Javascript 中设置调用堆栈？

在尝试解决以下问题：

Generate all combinations of an array of string.
Ex: Input: ['A','T','C','K']
Output: [
  'ATCK','ATC','ATK','AT','ACK','AC','AK','A','TCK','TC','TK','CK','K',''
]

我有以下代码：

function getSpellableWords(arr) {
    const res = [];
    // helper(arr,res,'');
    helper(arr,[]);
    return res;
}

function helper(arr,i,slate) {
  const char = arr[i];
  console.log(i,'i')
  if(i === arr.length) {
    res.push(slate.join(''));
    return;
  }

  // slate = slate + char;
  slate.push(char)
  console.log(slate,'slate')
  helper(arr,i+1,slate);
  slate.pop()

  helper(arr,slate);
}

getSpellableWords(['A','K']);

我的问题是：

如果我删除代码中的以下几行：

helper(arr,slate);

一旦i等于5（即array.length），代码将在将slate推入res后停止。但是，如果我保留该行，则会设置调用堆栈，因此 i 将从 1->5 上升，然后逐渐弹出到 4 然后 3 然后返回到4 等等。为什么会这样？

澄清： 所以我知道对于每次递归调用，都会生成另一个 i 变量。但是，我期待第二次递归调用也能再次从 1->4 生成 i，但这一次不是线性递增，而是回溯。为什么第一次调用没有回溯，为什么第二次调用只生成第一个结果，而第二个调用生成了其余的结果？

解决方法

helper 的每次递归调用确实会在调用堆栈上添加一个级别，以便当递归调用返回其调用者时，该调用代码可以继续使用其自己的本地执行上下文。

helper 的每次执行都有自己的执行上下文，其中包括一个 本地 变量 i，该变量仅对 那个 执行上下文可见。它只在调用堆栈中的那个级别起作用。

请注意，helper 代码永远不会更改其 i 变量的值。当它被调用时，它被初始化为作为第三个参数传递的任何值，这是它永远拥有的唯一值。

您注意到的更改到i实际上并没有更改。您看到的 i 的每个不同值实际上都与不同变量有关，而该变量恰好具有相同的名称。

当 i 变量的长度为 2 时，这里有一个关于这些 res 变量生命周期的小架构（只是为了不让它太长！）：

helper(arr,res,[]); // The initial call
    +--------top level helper execution context----+
    | i = 0                                        |
    | ....                                         |
    | slate.push(char)                             |
    | helper(arr,i+1,slate);                |
    |      +---nested helper execution context---+ |
    |      | i = 1                               | |
    |      | ....                                | |
    |      | slate.push(char)                    | |
    |      | helper(arr,slate);       | |
    |      |      +--deepest exec. context-----+ | |
    |      |      | i = 2                      | | |
    |      |      |  ...                       | | |
    |      |      | res.push(slate.join(''));  | | |
    |      |      | return;                    | | |
    |      |      +----------------------------+ | |
    |      | // i is still 1                     | |
    |      | slate.pop()                         | |
    |      | helper(arr,slate);       | |
    |      |      +----------------------------+ | |
    |      |      | i = 2                      | | |
    |      |      |  ...                       | | |
    |      |      | res.push(slate.join(''));  | | |
    |      |      | return;                    | | |
    |      |      +----------------------------+ | |
    |      | // i is still 1                     | |
    |      +-------------------------------------+ |
    | // i is still 0                              |
    | slate.pop()                                  |
    | helper(arr,slate);                |
    |      +-------------------------------------+ |
    |      | i = 1                               | |
    |      | ....                                | |
    |      | slate.push(char)                    | |
    |      | helper(arr,slate);       | |
    |      |      +----------------------------+ | |
    |      |      | i = 2                      | | |
    |      |      |  ...                       | | |
    |      |      | res.push(slate.join(''));  | | |
    |      |      | return;                    | | |
    |      |      +----------------------------+ | |
    |      | // i is still 1                     | |
    |      | slate.pop()                         | |
    |      | helper(arr,slate);       | |
    |      |      +----------------------------+ | |
    |      |      | i = 2                      | | |
    |      |      |  ...                       | | |
    |      |      | res.push(slate.join(''));  | | |
    |      |      | return;                    | | |
    |      |      +----------------------------+ | |
    |      | // i is still 1                     | |
    |      +-------------------------------------+ |
    | // i is still 0                              |
    +----------------------------------------------+

所以我们看到，在这个特定的算法中，调用堆栈的大小（即递归树的深度）正好对应于变量 i 的值当前执行上下文。当函数返回时，调用堆栈的大小减小（即递归深度减小），因此我们到达一个状态（从堆栈中弹出），其中存在另一个 {{1 }} 也有一个与调用堆栈的当前当前大小相匹配的值。

,

Trincot 就该功能的内部运作方式给出了有用的详细回应。我只想指出你可以写的一个重要的简化：

const getSpellableWords = ([x,...xs]) => 
  x == undefined
    ? ['']
    : ((ps = getSpellableWords (xs)) => [...ps .map (p => x + p),...ps]) ()

console .log (
  getSpellableWords (['A','T','C','K'])
)

.as-console-wrapper {max-height: 100% !important; top: 0}

这里我们注意到我们可以创建的单词要么包含第一个字符，要么不包含。我们可以递归地计算余数中的所有单词，然后返回将该单词数组与通过将第一个字符添加到每个单词中找到的单词组合的结果。当然，如果没有剩余字符，我们的递归就会触底，其中我们返回的数组只包含空字符串。

这里有一点语法技巧，递归分支中有一个 IIFE。我们可能更喜欢使用 call 辅助函数，它接受一个函数和任何参数，并使用这些参数调用该函数。有时这更清楚：

const call = (fn,...args) => fn (...args)

const getSpellableWords = ([x,...xs]) => 
  x == undefined
    ? ['']
    : call (
        (ps) => [...ps .map (p => x + p),...ps],getSpellableWords (xs)
      )