递归javascript_使用freeCodeCamp挑战解释了JavaScript中的递归

递归javascript

In this article I will touch on a few important ideas to help you understand Recursion in JavaScript. I’m not going to give a full definition here, but you can take a look at what Wikipedia has to say.

在本文中，我将介绍一些重要的想法，以帮助您了解JavaScript中的递归。 我不会在这里给出完整的定义，但是您可以看看Wikipedia怎么说 。

Let’s agree for the purpose of this article that we are trying to solve a problem by using a function that will then call itself.

出于本文的目的，让我们同意我们正在尝试通过使用一个将自身调用的函数来解决问题。

挑战 (The Challenge)

At the end of the Javascript Algorithms and Data Structures — Basic Javascript section on freeCodeCamp, you run into an interesting problem: ‘Use Recursion to Create a Range of Numbers’, where the instructions are as follows:

在freeCodeCamp上的Javascript算法和数据结构— Basic Javascript部分的最后 ，您遇到了一个有趣的问题：“使用递归创建数字范围”，其说明如下：

We have defined a function named rangeOfNumbers with two parameters. The function should return an array of integers which begins with a number represented by the startNum parameter and ends with a number represented by the endNum parameter. The starting number will always be less than or equal to the ending number. Your function must use recursion by calling itself and not use loops of any kind. It should also work for cases where both startNum and endNum are the same.

我们定义了一个带有两个参数的名为rangeOfNumbers的函数。 该函数应返回一个整数数组，该数组以startNum参数表示的数字开头，以endNum参数表示的数字结尾。 起始编号将始终小于或等于终止编号。 您的函数必须通过调用自身来使用递归，而不能使用任何形式的循环。 它还适用于startNum和endNum相同的情况。

Sounds simple enough – if you were to run rangeOfNumbers(1, 5) it should return [1, 2, 3, 4, 5].

听起来很简单–如果要运行rangeOfNumbers(1，5)，它应该返回[1、2、3、4、5]。

If you’re like me, you can sort of intuit the answer based on the previous example in this section. But it might still be a bit unclear how this all works.

如果您像我一样，可以根据本节中的上一个示例来直观地回答问题。 但这可能还不清楚。

Spoiler alert: you'll find an answer immediately below. But this isn’t much of a spoiler since the answer is easy enough to find on the internet.

剧透警报：您会在下面立即找到答案。 但这并不会破坏太多，因为答案很容易在互联网上找到。

我的解决方案 (My Solution)

It’s very probable that you can read through the code and understand that when it gets down to its base case it will return whatever the startNum is into the array. Then it will keep pushing the other values onto that array until it’s done with all of its recursive calls.

您很可能可以通读代码并了解其基本情况 ，它将返回数组中的startNum。 然后它将继续将其他值推入该数组，直到完成所有递归调用为止。

function rangeOfNumbers(startNum, endNum) {
    if (startNum === endNum) {
        return [startNum];
    } else {       
        const numbers = rangeOfNumbers(startNum, endNum - 1);
        numbers.push(endNum);
        return numbers;
    }
}

What I found to be tricky was understanding exactly how the call stack was working and how my values were being returned.

我发现棘手的是确切地了解调用堆栈如何工作以及如何返回我的值。

So let's break down how this function will return its final value.

因此，让我们分解一下此函数将如何返回其最终值。

调用堆栈 (The Call Stack)

The first thing to understand is how the call stack works. I will refer you to Mozilla Developer Network's explanation:

首先要了解的是调用堆栈如何工作。 我将向您介绍Mozilla开发人员网络的解释 ：

When a script calls a function, the interpreter adds it to the call stack and then starts carrying out the function.

当脚本调用函数时，解释器将其添加到调用堆栈中，然后开始执行该函数。

When a script calls a function, the interpreter adds it to the call stack and then starts carrying out the function.

当脚本调用函数时，解释器将其添加到调用堆栈中，然后开始执行该函数。

Any functions that are called by that function are added to the call stack further up, and run where their calls are reached.

该函数调用的所有函数都会进一步添加到调用堆栈中，并在到达其调用的位置运行。

Any functions that are called by that function are added to the call stack further up, and run where their calls are reached.

该函数调用的所有函数都会进一步添加到调用堆栈中，并在到达其调用的位置运行。

Using this explanation, let’s run the code above using rangeOfNumbers(1,5).

使用此说明，让我们使用rangeOfNumbers(1,5)运行上面的代码。

First the rangeOfNumbers — Execution Context is created and executed with the following values:

首先，使用以下值创建并执行rangeOfNumbers —执行上下文：

So we have added an unresolved rangeOfNumbers(1,5) function call to our stack. Then we move on to create the execution for rangeOfNumbers(1,4), and so on and so forth, adding each one of these calls to our stack until we will finally resolve a function call. Then the interpreter will take that function off the stack and move on to the next one.

因此，我们向堆栈中添加了一个未解决的rangeOfNumbers(1,5)函数调用。 然后，我们继续为rangeOfNumbers(1,4)创建执行程序， 依此类推 ， 依次类推，将这些调用中的每一个添加到堆栈中，直到最终解决函数调用为止。 然后，解释器将从堆栈中删除该函数，然后移至下一个函数。

检查我们的通话堆栈 (Examining Our Call Stack)

So our stack will end up looking like this:

因此，我们的堆栈最终将如下所示：

rangeOfNumbers(1,1)
rangeOfNumbers(1,2)
rangeOfNumbers(1,3)
rangeOfNumbers(1,4)
rangeOfNumbers(1,5)

rangeOfNumbers(1,1) will be the last one in our stack because, finally, this call will RETURN a value allowing us to move on to our next function in the stack.

rangeOfNumbers(1,1)将是堆栈中的最后一个，因为最后，此调用将返回一个值，使我们可以继续执行堆栈中的下一个函数。

rangeOfNumbers(1,1) return value is [1], as we had assumed it would be since it is our base case. Now we pop rangeOfNumbers(1,1) off our stack, and go back to where rangeOfNumbers(1,2) left off…

rangeOfNumbers(1,1)的返回值是[1]，正如我们已经假定的那样，因为它是我们的基本情况。 现在，我们从堆栈中弹出rangeOfNumbers(1,1) ，然后返回到距离rangeOfNumbers(1,2)不远的地方…

var numbers = rangeOfNumbers(1,2) // returns an array of [1]

Numbers is no longer undefined and the next step is to push the endNum, which is 2, into the numbers array. This gives us [1,2] in numbers, and now we return the value.

Numbers不再是未定义的 ，下一步是将为 2的endNum推入numbers数组。 这样就给了我们[1,2]个数字，现在我们返回了值。

numbers.push(endNum) //numbers now holds an array of [1,2]
return numbers; // ends our function and returns [1,2]

分解棘手的部分 (Breaking Down The Tricky Part)

So we pop off rangeOfNumbers(1,2) which had a return value of [1,2]. Let’s resume with the next call in our stack rangeOfNumbers(1,3). Numbers is currently [1,2] because that is the return value of rangeOfNumbers(1,2). This is what we had plugged in when we called rangeOfNumbers(1,3) because, again, the 3 is subtracted by 1, that is rangeOfNumbers(1,2), which as we said returns [1,2].

因此，我们弹出rangeOfNumbers(1,2) ，其返回值为[1,2]。 让我们从堆栈rangeOfNumbers(1,3)中的下一个调用继续。 Numbers当前为[1,2]，因为那是rangeOfNumbers(1,2)的返回值。 这就是我们在调用rangeOfNumbers(1,3)时插入的内容，因为再次将3减去1，即rangeOfNumbers(1,2) ，正如我们所说的返回[1,2]。

Got it? Great! If you don’t get it, reread this paragraph, because this is the trickiest part to understand.

得到它了？ 大！ 如果不理解，请重新阅读本段，因为这是最难理解的部分。

If you’re up to speed let’s continue. If that part above clicked the rest should feel pretty easy.

如果您要加快速度，那就继续吧。 如果单击上方的那部分，其余部分应该会很容易。

Back to rangeOfNumbers(1,3): the numbers array is currently [1,2], so we push the endNum which is 3. Now we have [1,2,3] and we return this value again. We remove rangeOfNumbers(1,3) from our stack which returned the value [1,2,3].

返回rangeOfNumbers(1,3) ：numbers数组当前为[1,2]，因此我们将endNum推为3。现在我们有了[1,2,3]，然后再次返回该值。 我们从返回值[1,2,3]的堆栈中删除rangeOfNumbers(1,3) 。

How did we get rangeOfNumbers(1,3)? That’s right, from when we called rangeOfNumbers(1,4) and endNumb -1, that is → 3, and we know that rangeOfNumbers(1,3) gives us the return value of [1,2,3] which is exactly what we have in our array.

我们如何获得rangeOfNumbers(1,3)？ 没错，从我们调用rangeOfNumbers(1,4)和endNumb -1开始，即→3，并且我们知道rangeOfNumbers(1,3)为我们提供了[1,2,3]的返回值我们有我们的阵列。

Now we push the endNum (also known as 4) onto the numbers array, giving us [1,2,3,4] and we return this value. Let’s again remove this function call from the stack since it gave us what we wanted.

现在我们将endNum(也称为4)压入数字数组，得到[1,2,3,4]并返回此值。 让我们再次从堆栈中删除此函数调用，因为它满足了我们的需求。

汇集全部 (Bringing it all together )

Now for the call that started it all: rangeOfNumbers(1,5). The first step we do is determine what value we have in numbers. When put in rangeOfNumbers(1,4) we get, as we said before, [1,2,3,4]. So we can now push our endNum 5 into the array and get [1,2,3,4,5] which we will return, and our stack is now empty with our last call.

现在开始所有的调用： rangeOfNumbers(1,5) 。 我们要做的第一步是确定数字所具有的价值。 如前所述，将rangeOfNumbers(1,4)放入[1,2,3,4]。 因此，我们现在可以将endNum 5推入数组并获取[1,2,3,4,5]，我们将返回它，并且我们的堆栈在上一次调用时为空。

So let’s quickly review which returned what value and in what order.

因此，让我们快速回顾一下哪个返回了什么值以及返回了什么顺序。

rangeOfNumbers(1,1) → returns [1]
rangeOfNumbers(1,2) → returns [1,2]
rangeOfNumbers(1,3) → returns [1,2,3]
rangeOfNumbers(1,4) → returns [1,2,3,4]
rangeOfNumbers(1,5) → returns [1,2,3,4,5]

If this is still confusing, firstly I understand – it’s a confusing topic. Next I would recommend typing in your code into this great tool: http://www.pythontutor.com/javascript.html

如果这仍然令人困惑，那么我首先要理解-这是一个令人困惑的话题。 接下来，我建议您在此出色的工具中输入代码： http : //www.pythontutor.com/javascript.html

This is all able to work because we started with a small base case and we essentially built our way back up. Each time our return value is a bit bigger than it was on its previous call, much like if you were to perform this same operation with a for loop.

这一切都是可行的，因为我们从一个小的基本案例入手，并且基本上建立了自己的备份方式。 每次我们的返回值都比上一次调用大，就像您要使用for循环执行相同的操作一样。

Have any questions? Feel free to ask me on Twitter: @NehemiahKiv

有什么问题吗？ 随时在Twitter上问我： @NehemiahK iv

翻译自: https://www.freecodecamp.org/news/learn-recursion-in-javascript-by-example/

递归javascript