递归javascript

by Kevin Ennis

凯文·恩尼斯(Kevin Ennis)

JavaScript中的递归 (Recursion in JavaScript)

I’m just gonna get this out of the way right up front, because people get really angry otherwise:

我只是直接解决这个问题，因为否则人们会非常生气：

Consider this post as a series of learning exercises. These examples are designed to make you think — and, if I’m doing it right, maybe expand your understanding of functional programming a little bit.

将此帖子视为一系列学习练习。这些示例旨在让您思考-如果我做对的话，也许可以使您对函数式编程的理解有所扩展。

嘿，哇我听说您喜欢递归，所以我说了“嘿，天哪。我听说您喜欢递归，所以我说了“嘿，天哪…… (Hey, dawg. I heard you like recursion, so I put a “Hey, dawg. I heard you like recursion, so I put a “Hey, dawg…)

Loosely defined, recursion is the process of taking a big problem and sub-dividing it into multiple, smaller instances of the same problem.

松散地定义，递归是处理一个大问题并将其细分为相同问题的多个较小实例的过程。

Put into practice, that generally means writing a function that calls itself. Probably the most classic example of this concept is the factorial function.

付诸实践，通常意味着编写一个调用自身的函数。此概念的最经典示例可能是阶乘函数。

You may remember from math class that the factorial of a number n is the product of all positive integers less than or equal to n. In other words, the factorial of 5 is 5 x 4 x 3 x 2 x 1. The mathematical notation for this is 5!.

您可能从数学课上还记得数字n的阶乘是所有小于或等于n的正整数的乘积。换句话说，阶乘5是5 x 4 x 3 x 2 x 1 。为此的数学符号为5！。

Something interesting you might have noticed about that pattern: 5! is actually just 5 x 4!. And 4! is just 4 x 3!. So on and so forth until you get down to 1.

关于该模式，您可能已经注意到了一些有趣的事情： 5！实际上只有5 x 4！ 。还有4！只有4 x 3！ 。依此类推，直到您降至1为止。

Here’s how we’d write that in JavaScript:

这是我们用JavaScript编写的方式：

If this seems confusing, I’d encourage you to mentally walk through the code using the example of factorial( 3 ).

如果这看起来令人困惑，我建议您使用factorial(3)的示例在代码上仔细地学习 。

Here’s a bit of help, in case you need it:

如果需要的话，这里有一些帮助：

factorial( 3 ) is 3 x factorial( 2 ).
factorial(3)是3 x factorial(2) 。
factorial( 2 ) is 2 x factorial( 1 ).
factorial(2)是2 x factorial(1) 。
factorial( 1 ) meets our if condition, so it’s just 1.
factorial(1)满足我们的if条件，因此仅为1。

So what’s really happening here is that you’re winding up the call stack, getting down to 1, and then unwinding the stack. As you unwind the call stack, you multiply each result. 1 x 2 x 3 is 6, and that’s your return value.

因此，这里真正发生的事情是结束调用堆栈，降低到1 ，然后展开堆栈。展开调用堆栈时，将每个结果相乘。 1 x 2 x 3是6 ，这就是您的返回值。

反转字符串 (Reversing A String)

One of my co-workers recently told me about a whiteboard question that he’d been asked in an interview, and I thought it was kind of a fun problem.

我的一位同事最近告诉我一个关于白板问题的采访中有人问他，我认为这是一个有趣的问题。

Write a function that accepts a string a reverses it. Recursively.

编写一个接受字符串并将其反转的函数。递归地。

If you’re the ambitious type, I’d encourage you to take a few minutes and try to solve this one on your own. Keep in mind the core principle of recursion, which is to take a big problem and break it down into smaller instances of itself.

如果您是一个有野心的人，我建议您花几分钟时间，尝试自己解决这个问题。请记住递归的核心原则，即解决一个大问题并将其分解为更小的实例。

If you got stuck (or you’re the decidedly unambitious type), here’s my solution:

如果你卡住了(或者你是决然不思进取型)，这里是我的解决方案：

Again, I’ll give a quick walk-through example in case you got stuck. We’ll use reverse(‘bar’) as a starting point.

再次，我将给出一个快速的示例，以防您陷入困境。我们将使用reverse('bar')作为起点。

reverse(‘bar’) is reverse(‘ar’) + ‘b’
reverse('bar')是reverse('ar')+'b'
reverse(‘ar’) is reverse(‘r’) + ‘a’
reverse('ar')是reverse('r')+'a'
reverse(‘r’) meets our if condition, so it’s just ‘r’
reverse('r')满足我们的if条件，所以它只是'r'

When the call stack unwinds, we end up with ‘r’ + ‘a’ + ‘b’.

当调用堆栈结束时，我们最终得到'r'+'a'+'b' 。

编写递归映射函数 (Writing a Recursive Map Function)

For our final example, we’re going to write a map() function. We want to be able to use it like this:

对于最后一个示例，我们将编写一个map()函数。我们希望能够像这样使用它：

Again, I’d strongly encourage you to take a few minutes and try this one on your own. Here are a few hints and reminders:

再一次，我强烈建议您花几分钟时间，自己尝试一下。以下是一些提示和提醒：

map() should always return a new array.
map()应该始终返回一个新数组。
Break the problem down into smaller chunks.
将问题分解成小块。
Remember the reverse() example.
记住reverse()示例。

Oh, good. You’re back. How did it go?

哦好你回来了。怎么样了

j/k, this is a blog and I can’t hear you. lol.

j / k，这是一个博客，我听不到您的声音。大声笑。

Anyway, here’s how I did it:

无论如何，这是我的做法：

So let’s go through this using the example I gave earlier:

因此，让我们使用我之前给出的示例来完成此操作：

Call map() using the array [ ‘a’, ‘b’, ‘c’ ]
使用数组['a'，'b'，'c']调用map()
Create a new array that holds the result of calling fn(‘a’)
创建一个新数组，其中包含调用fn('a')的结果
Return [ ‘A’ ].concat( map([ ‘b’, ‘c’ ]) )
返回['A'] .concat(map(['b'，'c']))
Repeat steps 1 through 3 with [ ‘b’, ‘c’ ]
用['b'，'c']重复步骤1至3
Repeat steps 1 through 3 for [ ‘c’ ]
对['c']重复步骤1至3
Eventually, we call map() with an empty array, which ends the recursion.
最终，我们使用一个空数组调用map() ，从而结束了递归。

NOTE:You should never, ever, ever do this in a real application. You’ll blow out the stack on large arrays, and more importantly, you create a huge amount of garbage by instantiating so many new objects. Use Array#map in production code.

注意：您永远不要在真实的应用程序中这样做。您将炸毁大型阵列上的堆栈，更重要的是，通过实例化许多新对象来创建大量垃圾。在生产代码中使用Array＃map 。

结语 (Wrap Up)

Hopefully I did a decent job in explaining this stuff. If you’re still struggling a bit to wrap your head around recursion, the best advice I can give is to start with small examples and mentally trace the call stack. Try something like reverse(‘abc’) and walk through it, step-by-step. Eventually it’ll click.

希望我在解释这些东西方面做得不错。如果您仍在努力地绕过递归，那么我可以提供的最佳建议是从小的示例开始，并从心理上跟踪调用堆栈。尝试类似reverse('abc')之类的步骤，并逐步进行操作。最终它将单击。

— -

Follow me on Twitter or Medium for more posts. I’m trying to write once a day for the next 30 days.

在Twitter或Medium上关注我以获取更多帖子。在接下来的30天里，我每天尝试写一次。

And if you’re in the Boston area and want to come work on crazy, interesting, hard problems with me at Starry, shoot me an email. I’m hiring.

如果您在波士顿地区，并且想在Starry与我一起解决疯狂，有趣，棘手的问题，请给我发送电子邮件。我在招聘。