Javascript:for循环'for(i = 0; i <3; i ++)'过早终止而不使用continue,break或return

Shi*_*iro 1 javascript scope for-loop global-variables nested-loops

考虑以下代码:

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

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

A();
Run Code Online (Sandbox Code Playgroud)

预期产出:

---0---
0
1
2
---1---
0
1
2
---2---
0
1
2
Run Code Online (Sandbox Code Playgroud)

收到的输出:

---0---
0
1
2
Run Code Online (Sandbox Code Playgroud)

我已经使用了这里描述的for循环.这是与Google搜索"javascript for loop"时的第一个结果.并且发现了几十个提出类似方法的例子.

来自www.w3schools.com的报价:

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

为什么' A()'没有提供预期的产出?

注意:

我发布这个问题是因为我遇到了这个问题并且没有在网上找到任何关于这个问题的内容,尽管遇到它的可能性相对较高.

Shi*_*iro 6

在Javascript中设置但未事先声明的变量在全局范围内创建.

这在大多数情况下都很好,但由于' i'通常是在需要计数器变量的名称时选择的,这可能成为一个严重的问题.

如果某些for循环嵌套当然你会使用' j',' k',' l' ...作为计数器变量名来不干扰其他for循环的迭代,但是当在for循环中调用一个函数X()时,尤其是当你不是' X()' 的作者,for循环使用相同的计数器变量名称会相互干扰.

这意味着您应该在本地范围内声明任何计数器变量以避免此类问题,如果您不知道自己在寻找什么,这可能很难调试.

现在让我们来看看A()从问题中调用' ' 时会发生什么.

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

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

  1. 输入for循环,' i'设置为' 0'.
  2. 因为' 0 < 3'是true循环体将被输入.
  3. ' ---0---'打印到控制台.

现在' B()'被称为.

function B()
{    
    for(i = 0; i < 3; i++)
    {
        console.log(i);
    }
}
Run Code Online (Sandbox Code Playgroud)

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

  1. 输入for循环,' i'设置为' 0'.
  2. 因为' 0 < 3'是true循环体将被输入.
  3. ' 0'打印到控制台.
  4. ' i'增加' 1',现在保持值' 1'.
  5. 现在循环重复' 2.4.',但随着' i':
    ' 1'和' 2'的值越来越大,打印到控制台.
  6. 因为' 3 < 3'是falsefor循环,所以' B()'完成执行.

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

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

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

  1. ' i'增加' 1',现在保持值' 4'.
  2. 因为' 4 < 3'是falsefor循环,所以' A()'完成执行.

因此,问题的例子应该改为:

for (i = 0; i < 3; i++) {
    //...
}
Run Code Online (Sandbox Code Playgroud)

for (var i = 0; i < 3; i++) {
    //...
}
Run Code Online (Sandbox Code Playgroud)

要么

var i;
for (i = 0; i < 3; i++) {
    //...
}
Run Code Online (Sandbox Code Playgroud)

  • 好解释! (2认同)