为什么这个 javascript for 循环只运行一次?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/23910464/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 01:47:32  来源:igfitidea点击:

Why is this javascript for loop running only once?

javascriptfor-loopvar

提问by Kam

function f1() {
   for (i = 0; i <= 5; i++)
      console.log(i);
}
function foo() {
   for (i = 0; i < 5; i++)
      f1();
}
foo();

Hi, I'm trying to understand why the result of executing foo is:

嗨,我试图理解为什么执行 foo 的结果是:

0
1
2
3
4
5

And not:

并不是:

0
1
2
3
4
5
0
1
2
3
4
5
0
1
2
3
4
5
0
1
2
3
4
5
0
1
2
3
4
5

It's a slide I am reading about JS and its talking about when you don't use var then it is defined on the global object and provides this example without any further details why we get the result.

这是一张我正在阅读的关于 JS 的幻灯片,它谈到当你不使用 var 然后它在全局对象上定义,并提供了这个例子,没有任何进一步的细节为什么我们得到结果。

I thought it will simply loop and run the f1 function each time until its less than 5.

我认为它每次都会简单地循环并运行 f1 函数,直到它小于 5。

Please help me understand.

请帮我理解。

Thanks

谢谢

回答by Cerbrus

The problem is in your iterators (i):

问题出在您的迭代器 ( i) 中:

for (i = 0; i <= 5; i++)

iis global, and both your forloops test against it, making them only run once, and aborting when i == 5.

i是全局的,并且您的两个for循环都针对它进行测试,使它们只运行一次,并在i == 5.

So, what happens is this:

所以,发生的事情是这样的:

When you call foo(), footells the js interpreter to create a variable in the global scope called i, and set it to 0. Then foocalls f1.
There, the forloop sets i, which already exists, to 0, and runs it's loop like it should, incrementing iup to 5.
Then, it's time for the second iteration of the loop in foo, so it checks if i < 5, but it's not (i==6(5from f1, +1from foo)), so it will not call f1again.

当您调用 时foo()foo告诉 js 解释器在名为 的全局范围内创建一个变量i,并将其设置为0. 然后foo调用f1
在那里,for循环将i已经存在的设置为0,并像它应该的那样运行它的循环,递增i5
然后,是循环的第二次迭代的时候了foo,所以它检查 if i < 5,但它不是 ( i==6( 5from f1, +1from foo)) ,所以它不会f1再次调用。

To fix this, either declare them in the function's local scope using var:

要解决此问题,请使用以下命令在函数的本地范围内声明它们var

function f1() {
    for (var i = 0; i <= 5; i++)
        console.log(i);
}
function foo() {
    for (var i = 0; i < 5; i++)
        f1();
}
foo();

Or, use different variables:

或者,使用不同的变量:

function f1() {
    for (i = 0; i <= 5; i++)
        console.log(i);
}
function foo() {
    for (j = 0; j < 5; j++)
        f1();
}
foo();

However, this second option is a bad idea, since it will both place iand jin the global scope, which is asking for conflicts. I'd suggest using the varoption.

然而,这第二个选项是一个坏主意,因为它会同时放置ij在全局范围内,这会导致冲突。我建议使用该var选项。

回答by Matteo Tassinari

If you write your loop like

如果你写你的循环像

for (i = 0; i < 5; i++)

here irefers to a global variable, because you have not declared it with the varkeyword, and since you use iin both functions, they end up actually using the same variable.

这里i指的是一个全局变量,因为你没有用var关键字声明它,而且因为你i在两个函数中使用,它们最终实际上使用了相同的变量。

You should then replace both loops with

然后你应该用

function f1() {
   for (var i = 0; i <= 5; i++)
      console.log(i);
}
function foo() {
   for (var i = 0; i < 5; i++)
      f1();
}
foo();

As your code is originally written, iis a shared global variable, so foostarts, sets is to 0then calls f1 which loop on it up to 6, when control returns to fooit founds that iis 6, so i < 5is falseand so it ends the loop.

当你的代码原始写入,i是一个共享的全局变量,所以foo开始,集是0然后调用F1其环上达6,当控制返回到foo它开创即i6,这样i < 5false,所以它结束循环。