JS中arrays.push在for循环里添加元素为何输出重复

在JavaScript编程中，开发者有时会遇到在for循环里使用arrays.push添加元素却得到重复输出的情况，这一现象常常让人困惑。了解其背后的原因对于正确编写代码和理解JavaScript的运行机制至关重要。

来看一个简单的示例代码：

var arr = [];
for (var i = 0; i < 3; i++) {
  arr.push(function() {
    console.log(i);
  });
}
arr.forEach(function(func) {
  func();
});

运行这段代码，你会发现输出的结果并不是期望的0、1、2 ，而是三个3 。这是因为在JavaScript中，使用var声明的变量存在变量提升和函数作用域的问题。

在上述代码中，for循环里的i是用var声明的，这意味着它的作用域是整个函数，而不是每次循环。当循环结束后，i的值已经变成了3 。而数组arr中存储的是三个函数，这些函数在执行时都会访问同一个i，此时i的值为3 ，所以输出的结果都是3 。

要解决这个问题，可以使用let关键字来声明变量。let声明的变量具有块级作用域，每次循环都会创建一个新的作用域，每个作用域中的i都是独立的。修改后的代码如下：

var arr = [];
for (let i = 0; i < 3; i++) {
  arr.push(function() {
    console.log(i);
  });
}
arr.forEach(function(func) {
  func();
});

现在，输出结果就会是0、1、2 ，符合预期。

另外，还可以使用闭包来解决这个问题。通过创建一个立即执行函数表达式（IIFE），将每次循环的i值传递进去，形成一个闭包，这样每个函数都能访问到独立的i值。

在JavaScript中，arrays.push在for循环里添加元素输出重复的问题主要是由于变量作用域的原因。掌握var和let的区别以及闭包的使用方法，能够帮助开发者避免这类问题，写出更健壮、正确的代码。