为什么相同代码片段，threes1 和 threes2 却得到不同的运行结果？
这是一个非常有趣的问题！表面上看，两段代码似乎在做相同的事情，但结果却不同。让我们仔细分析一下。
问题重现
首先，让我们看看这两段代码：
// threes1
let threes1 = [];
for (let i = 0; i < 10; i++) {
setTimeout(() => {
threes1.push(i);
console.log(threes1);
}, 100 * i);
}// threes2
let threes2 = [];
for (var i = 0; i < 10; i++) {
setTimeout(() => {
threes2.push(i);
console.log(threes2);
}, 100 * i);
}乍一看，它们几乎完全相同，唯一的区别是第一个使用了 let，第二个使用了 var。但运行结果却截然不同！
关键差异：let vs var 的块级作用域
这里的关键在于 let 和 var 的作用域差异：
let 具有块级作用域，每次循环都会创建一个新的
i绑定var 只有函数作用域，整个循环中只有一个
i
详细分析
threes1 (使用 let)
由于 let 的块级作用域特性，每次循环都会创建一个新的 i 变量实例。这意味着每个 setTimeout 回调函数捕获的都是不同的 i 值：
第1次循环：捕获 i=0
第2次循环：捕获 i=1
...
第10次循环：捕获 i=9
threes2 (使用 var)
由于 var 没有块级作用域，整个循环中只有一个 i 变量。当 setTimeout 回调执行时（循环结束后），它们都访问的是同一个 i，此时 i 的值已经是 10：
所有10个回调函数都捕获同一个 i，最终值为 10
验证和理解
让我们通过一个更简单的例子来验证这个行为：
// 使用 let
console.log('=== 使用 let ===');
for (let i = 0; i < 3; i++) {
setTimeout(() => console.log('let:', i), 100);
}
// 使用 var
console.log('=== 使用 var ===');
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log('var:', i), 100);
}输出结果将是：
=== 使用 let === let: 0 let: 1 let: 2 === 使用 var === var: 3 var: 3 var: 3
解决方案
如果你想要在 var 的情况下获得与 let 相同的结果，可以使用 IIFE（立即调用函数表达式）来创建新的作用域：
let threes3 = [];
for (var i = 0; i < 10; i++) {
(function(j) {
setTimeout(() => {
threes3.push(j);
console.log(threes3);
}, 100 * j);
})(i);
}或者，在现代 JavaScript 中，你可以使用 const 或继续使用 let 来获得更可预测的行为。
总结
这个例子完美地展示了 JavaScript 中 let 和 var 的关键区别：
let提供块级作用域，每次循环迭代都有独立的变量绑定var只有函数作用域，循环中所有迭代共享同一个变量在异步操作（如
setTimeout）中，这种差异会导致完全不同的结果
理解这些作用域规则对于编写可预测的 JavaScript 代码至关重要，特别是在处理异步操作时。