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 循环的迭代，但在调用函数时 'X() ' 在 for 循环内，尤其是当您不是 'X() 的作者时'，for 循环使用相同的计数器变量名称会相互干扰。

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

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

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

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

1. 进入 for 循环并且 'i ' 设置为 ' 0 '.
2. 自“0 < 3” ' 是 true将进入循环体。
3. ' ---0--- ' 打印到控制台。

现在 ' B() ' 被调用。

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

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

1. 进入 for 循环并且 'i ' 设置为 ' 0 '.
2. 自“0 < 3” ' 是 true将进入循环体。
3. ' 0 ' 打印到控制台。
4. ' i ' 递增 ' 1 ' 并且现在的值是 ' 1 '.
5. 现在循环重复' 2.至 4. ' 但随着 ' i 的值(value)不断增加':
   '1 ' 和 ' 2 ' 打印到控制台。
6. 自“3 < 3” ' 是 false for循环及其'B() ' 完成执行。

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

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

然后只执行了两个额外的步骤:

1. ' i ' 递增 ' 1 ' 并且现在的值是 ' 4 '.
2. 自“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++) {
    //...
}