Question

美好的一天。有一个递归函数：

function f(counter) {
    counter--;
    document.write("<p style='background: blue'>" + counter);
    
    if(counter != 0) {
        f(counter);
    }
    
    document.write("<p style='background: yellow'>" + counter);
}

f(3);

我不明白它是如何运作的。

在函数中得到3 - 值计数器。然后计数器减少，变为2.下一步显示蓝色部分2的值。然后计数器不为0的条件 - 函数递归调用自身。在下一个启动计数器值减少并变为1.然后该单位显示在蓝色部分。然后再次触发条件，因为即使计数器不为0，该函数再次调用自身，将计数器减少为0并在蓝色部分输出0。下一步计数器处于递归调用终止的情况。功能在黄色部分输出0。但后来我想知道为什么黄色部分的终端1和2？

我理解为什么蓝色部分中的输出为2,1,0 - 因为如果（计数器！= 0）触发条件并且函数调用自身。如果未触发counter == 0条件且f（0）终止该调用 - 黄色部分中的结论0。但是为什么然后完成前面的函数调用--1和2在黄色部分输出它们，而不是蓝色，这不是我可以理解的。

Answer 1

如果你还没有处理它，那么递归可能会令人困惑，但我会试着解释一下：

您致电：f(3)

所以它进入并调用：document.write("" + counter);

然后在counter--之后打印带有2的蓝线作为计数器2，然后它调用f(2)（因为counter != 0因为它是2。）

所以它调用：document.write("" + counter);

然后在counter--之后打印带蓝色的一行，因为计数器是1，然后它会调用f(1)（因为counter != 0因为它是1。）

所以它调用：document.write("" + counter);

然后在counter--之后打印出蓝色线，其中0表示计数器为0，然后它不会调用f(0)（因为counter == 0）

所以现在我们完成了我们所处的功能（其中＆＃39; counter == 0＆＃39;）并调用：document.write("" + counter);

打印黄色线，其中0为计数器为0

然后我们回到函数，我们从f(0)和counter == 1调用document.write("" + counter);并调用f(1)

打印黄色线，其中1为计数器为1

然后我们回到函数，我们从counter == 2和document.write("" + counter);调用function f(3) { counter--; document.write("" + counter); if(counter != 0) { f(counter) // counter equals 2 } document.write("" + counter); }并调用f(counter)

打印黄色线，其中2为计数器为2

我知道这很令人困惑，但我希望它有帮助吗？

* 编辑 * 以下是我更详细，希望非常明确的解释！

这是我的尝试：

f(2)

因此，让我们将function f(3) { counter--; document.write("" + counter); if(counter != 0) { counter2 = counter; counter2--; document.write("" + counter2); if(counter2 != 0) { f(counter2) // counter2 equals 1 } document.write("" + counter2); } } document.write("" + counter); }又名f(counter2)替换为实际被调用的内容（将计数器w / counter2放置，因为它们是单独的变量：

f(1)

现在再说一次，让我们将function f(3) { counter--; document.write("" + counter); // prints 2 if(counter != 0) { counter2 = counter; counter2--; document.write("" + counter2); // prints 1 if(counter2 != 0) { counter3 = counter2; counter3--; document.write("" + counter3); // prints 0 if(counter3 != 0) { // counter3 equals 0 so this is false f(counter3); // this is never called because counter3 DOES equal 0 } document.write("" + counter3); // prints 0 } document.write("" + counter2); // prints 1 } } document.write("" + counter); // prints 2 }又名{{1}}替换为实际调用的内容（将counter2替换为counter3，因为它们又是单独的变量。）

{{1}}

Answer 2

这是因为counter是一个作用于f的局部变量。

// value of counter = 2
document.write("<p style='background: blue'>" + counter);

if(counter != 0) {
    f(counter) // calling f(2), must wait for function to return before continuing.
}

// after return, the value of counter is still 2 because it's a local variable
document.write("<p style='background: yellow'>" + counter);

Answer 3

但是为什么然后完成前面的函数调用--1和2在黄色部分输出它们，而不是蓝色，这不是我可以理解的。

因为在执行f（3）之后，函数没有终止并且正在等待f（2）调用的完成。当它完成后，它会进一步将3写入黄色div。等等每个柜台。

想象一下f调用本身并不是其他函数myFunc。等到myFunc结束。使用递归相同的流程。

Answer 4

这可能是因为变量＆＃34; counter＆＃34;是函数f的局部变量。您应该缓存变量，以便按照您的描述运行f。在这里查看这个答案：javascript for loop variable and recursion它描述了一个类似的问题及其解决方案。

Answer 5

我意识到我们递归调用f（2），f（1），f（0），但是当if（counter！= 0）时，我们不会结束调用，这个条件不起作用。显示屏将为0黄色。现在我们需要完成函数f（1）和f（2）的其余部分，这些函数有document.write ("" + counter) ;。事实证明，当我们完成这些挑战时，输出1和2为黄色。

请帮我一个递归功能

5 个答案: