javascript - 无法理解 JS 中这个 for 循环的输出

Question

我已经明白为什么这段代码的输出应该是 3 3 3 .

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1);
}

但是，我无法理解为什么这段代码的输出是 0 1 2 .

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1);
}

我希望第二个 for 的输出更清晰环形。

Answer 1

有区别范围 与 let和 var ，这导致它们的行为不同。
这是来自其他 Stack Overflow answer 的引述关于 var 之间的区别和 let .

The main difference is scoping rules. Variables declared by var keyword are scoped to the immediate function body (hence the function scope) while let variables are scoped to the immediate enclosing block denoted by { } (hence the block scope).

所以，总而言之， var指的是同一个变量地址。但是，作为 let是阻塞范围(根据上面的引用)， setTimeout() 中的每个回调将使 i具有与前一个不同的值。

一个可能的实验是使 let表现得像 var .制作 let表现得像 var ，您可以使用(并运行)下面的代码。
看看如何 let表现得像 var ，请提前阅读 var吊装!

let i;
for (i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1);
}

当我们搬家时 let到主范围，它的行为类似于 var (因为 var 位于文件顶部，运行时值为 undefined)。
这使得 let变量的行为类似于 var ，使 for 的输出循环与 let 相同变量为 var .
感谢 Nick Vu为实验!

这里是 var 的快速概览下面吊装。
实际代码(如下所示):

web = "stackoverflow.com";
var web;

可以理解为:

var web;
web = "stackoverflow.com";

基本上，用 var 定义一个变量任何地方都会导致它位于文件的顶部，从而导致 for 的奇怪行为环形。
这就是为什么很多人更喜欢 let超过 var ;因为多么令人困惑 var hoisting可!

始终使用 let , 除非 var绝对需要!