JS代码输出疑问：for循环+setTimeout执行结果为何与预期不符？

嘿，我来帮你搞清楚这个问题～你遇到的是JavaScript里变量作用域和异步任务执行时机的经典坑。

正确输出结果 #

3秒后，控制台会连续输出4次：

Index: 4, element: undefined

错误原因解析 #

你之所以会给出错误答案，是忽略了两个关键知识点：

1. var的作用域特性：用var声明的i是函数级作用域（全局环境下就是全局作用域），整个for循环里只有一个i变量，每次循环都会覆盖它的值，而非为每个循环创建新变量。
2. setTimeout的异步性：setTimeout的回调函数是宏任务，它不会立即执行，而是被放到任务队列中，等主线程的同步代码（整个for循环）执行完毕后，才会开始执行这些回调。

当3秒后回调开始执行时，for循环早就跑完了：此时i的值已经变成了4（因为循环条件是i < arr.length，当i等于4时不满足条件，循环停止），而arr[4]不存在，所以结果就是undefined。

如何修复得到你预期的结果？ #

如果你想让每个回调输出对应的索引和元素，可以用以下几种方法：

方法1：用let代替var #

let是块级作用域，每次循环都会创建一个新的i变量，捕获当前循环的索引值：

const arr = [10, 12, 15, 21]; 
for (let i = 0; i < arr.length; i++) { 
  setTimeout(function() { 
    console.log('Index: ' + i + ', element: ' + arr[i]); 
  }, 3000); 
}

方法2：用立即执行函数(IIFE)捕获每次的i #

通过立即执行函数把每次循环的i作为参数传递进去，创建独立的作用域：

const arr = [10, 12, 15, 21]; 
for (var i = 0; i < arr.length; i++) { 
  (function(index) {
    setTimeout(function() { 
      console.log('Index: ' + index + ', element: ' + arr[index]); 
    }, 3000); 
  })(i);
}

方法3：使用forEach循环 #

forEach的回调函数会为每个元素创建独立的作用域，天然避免这个问题：

const arr = [10, 12, 15, 21]; 
arr.forEach((element, index) => {
  setTimeout(function() { 
    console.log('Index: ' + index + ', element: ' + element); 
  }, 3000); 
});

内容的提问来源于stack exchange，提问作者user9844692