JS踩坑: for let 和 for var的区别

最近踩了一个js的坑

踩坑代码

如下两段代码，看起来没什么区别，但是实际运行效果却不一样

for (let i = 0; i < 10; i++) {
    console.log("for:" + i);
    setTimeout(() => {
        console.log("setTimeout:" + i);
    }, 1000);
}
1
2
3
4
5
6

输出：

for (var i = 0; i < 10; i++) {
    console.log("for:" + i);
    setTimeout(() => {
        console.log("setTimeout:" + i);
    }, 1000);
}
1
2
3
4
5
6

输出：

原理

在JavaScript中，使用关键字let和var声明变量的方式在for循环中会导致不同的行为。

1. for (let i = 0; i < 10; i++)：
   1

• 使用let声明的变量i具有块级作用域。这意味着i仅在for循环的代码块中可见。每次迭代都会创建一个新的i实例，其作用域仅限于当前迭代。这样可以避免变量在循环外部被访问或污染。
• 在每次迭代之间，i的值都会被保留，不会相互干扰。每次迭代开始时，都会使用新的值进行初始化。

2.  for (var i = 0; i < 10; i++)：
   1

• 使用var声明的变量i具有函数作用域。这意味着i在整个函数范围内都是可见的，而不仅仅是在for循环内部。
• 由于var声明的变量没有块级作用域，因此在循环外部也可以访问到i。这可能导致意料之外的行为，因为i的值会在循环内外共享。
• 在每次迭代之间，i的值会被保留，所以在循环外部访问i时，它将具有最后一次迭代的值。

综上所述，使用let声明可以更好地控制变量的作用域，并避免一些常见的问题。因此，建议在JavaScript中优先使用let而不是var来声明循环变量。