javascript - 请帮我一个递归函数

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。然后单位显示在蓝色部分。然后再次触发条件，因为即使counter不为0，函数再次调用自身，将counter减为0，蓝色部分输出0。下一步计数器进入递归调用终止的条件。函数在黄色部分输出 0。但是后来我想知道为什么黄色部分是1号和2号航站楼？

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

Answer 1

如果你没有处理过递归，你可能会感到困惑，但我会尽力解释:

您调用:f(3)

所以它进入并调用:document.write("<p style='background: blue'>" + counter);

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

所以它调用:document.write("<p style='background: blue'>" + counter);

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

所以它调用:document.write("<p style='background: blue'>" + counter);

然后打印带有 0 的蓝线，因为在 counter-- 之后计数器为 0 , 那么它就不会调用 f(0) (因为 counter == 0 )

所以现在我们完成了我们所在的函数(其中'counter == 0')并调用:document.write("<p style='background: yellow'>" + counter);

当计数器为 0 时打印带有 0 的黄线

然后我们回到我们调用的函数 f(0)来自和counter == 1那叫document.write("<p style='background: yellow'>" + counter);

当计数器为 1 时打印带有 1 的黄线

然后我们回到我们调用的函数 f(1)来自和counter == 2那叫document.write("<p style='background: yellow'>" + counter);

然后打印带有 2 的黄线，因为计数器是 2

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

* 编辑 *这是我更详细且希望非常清楚的解释!

这是我的尝试:

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

    if(counter != 0) {
        f(counter) // counter equals 2
    }

    document.write("<p style='background: yellow'>" + counter);
}

所以让我们替换f(counter)又名 f(2)上面是实际调用的内容(放置 counter w/counter2 因为它们是单独的变量:

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

    if(counter != 0) {
            counter2 = counter;
            counter2--;
            document.write("<p style='background: blue'>" + counter2);

            if(counter2 != 0) {
                f(counter2) // counter2 equals 1
            }

            document.write("<p style='background: yellow'>" + counter2);
        }
    }

    document.write("<p style='background: yellow'>" + counter);
}

现在，让我们再次替换 f(counter2)又名 f(1)上面是实际调用的内容(将 counter2 替换为 counter3，因为它们是单独的变量。)

function f(3) {
    counter--;
    document.write("<p style='background: blue'>" + counter); // prints 2

    if(counter != 0) {
            counter2 = counter;
            counter2--;
            document.write("<p style='background: blue'>" + counter2); // prints 1

            if(counter2 != 0) {
                 counter3 = counter2;
                 counter3--;
                 document.write("<p style='background: blue'>" + 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("<p style='background: yellow'>" + counter3);  // prints 0
            }

            document.write("<p style='background: yellow'>" + counter2); // prints 1
        }
    }

    document.write("<p style='background: yellow'>" + counter); // prints 2
}