Javascript：for 循环 'for(i=0; i < 3 ; i++)' 过早终止，没有使用 continue、break 或 return

Question

考虑以下代码：

function A()
{
    for(i = 0; i < 3; i++)
    {
        console.log("---" + i + "---");
        B();
    }
}

function B()
{    
    for(i = 0; i < 3; i++)
    {
        console.log(i);
    }
}

A();

预期输出：

---0---
0
1
2
---1---
0
1
2
---2---
0
1
2

收到输出：

---0---
0
1
2

我已经按照 here 所述使用了 for 循环。这是用 Google 搜索 "javascript for loop" 时的第一个结果。并且发现了数十个建议采用类似方法的示例。

引自www.w3schools.com:

for (i = 0; i < cars.length; i++) {
    text += cars[i] + "<br>";
}

为什么“A()”没有提供预期的输出？

注：

我发布这个问题是因为我遇到了这个问题，尽管遇到它的可能性相对较高，但没有在网上找到任何关于这个问题的信息。

Answer 1

In Javascript variables that are set but weren't declared beforehand are created in the global scope.

这在大多数情况下都很好，但由于“i”通常是在需要为计数器变量命名时选择的数字，这可能会成为一个严重的问题。

如果某些 for 循环是嵌套的，您当然会使用 'j'、'k'、'l'、... 作为计数器变量名称不会干扰其他 for 循环的迭代，但在 for 循环内调用函数“X()”时，尤其是当您不是“X()”的作者时，for 循环使用相同的计数器变量名会互相干扰。

这意味着您真的应该在本地范围内声明任何计数器变量以避免此类问题，如果您不知道要查找什么，这可能很难调试。

现在让我们看看从问题中调用“A()”时会发生什么。

function A()
{
    for(i = 0; i < 3; i++)
    {
        console.log("---" + i + "---");
        B();
    }
}

在执行'B()'之前执行以下步骤：

进入for循环，'i'设置为'0'。
因为'0 < 3'是true，将进入循环体。
'---0---' 打印到控制台。

现在调用“B()”。

function B()
{    
    for(i = 0; i < 3; i++)
    {
        console.log(i);
    }
}

在“B()”完成执行之前执行以下步骤:

进入for循环，'i'设置为'0'。
因为'0 < 3'是true，将进入循环体。
'0' 打印到控制台。
'i' 增加了'1'，现在的值是'1'。
现在循环重复'2.到4.'但是'i'的值不断增加：
'1'和' 2' 打印到控制台。
因为'3 < 3'是false for 循环并且'B()'完成执行。

现在我们回到了“A()”，但是“i”的值为“3”：

function A()
{
    for(i = 0; i < 3; i++)
    {
        console.log("---" + i + "---");
        B();
    }
}

然后只执行了两个附加步骤：

'i' 增加了'1'，现在的值是'4'。
因为'4 < 3'是false for 循环并且'A()'完成执行。

因此，问题中的示例应更改为：

for (i = 0; i < 3; i++) {
    //...
}

to

for (var i = 0; i < 3; i++) {
    //...
}

or

var i;
for (i = 0; i < 3; i++) {
    //...
}

Javascript：for 循环 'for(i=0; i < 3 ; i++)' 过早终止，没有使用 continue、break 或 return

Javascript: for loop 'for(i=0; i < 3 ; i++)' terminates too early without using continue, break or return

javascript

scope

for-loop

global-variables

nested-loops