JavaScript for循环中Promise的变量作用域问题求解

嘿，这个问题我当初刚上手异步JavaScript的时候可踩过不少坑！咱们先搞清楚为啥会出现这种情况：如果你用var声明循环变量i，那它是函数级（或全局）作用域，整个循环共用同一个i。当Promise的then回调执行时，循环早就跑完了，i已经变成4，所以所有回调都只能拿到最后这个值。下面给你几种靠谱的解决方案，核心都是让每个Promise能绑定到当前迭代的i值：

方法1：用let声明循环变量（最简洁的现代方案） #

ES6引入的let有块级作用域，而且在for循环头部声明let i时，每次迭代都会创建一个新的i绑定——也就是说，每个Promise拿到的都是当前迭代专属的i副本，完全不受后续迭代影响。代码示例：

for (let i = 0; i < 4; i++) {
  // 这里的i是当前迭代的独立变量
  fetchSomeData(i).then(result => {
    console.log(`第${i}次请求的结果：`, result);
    // 不管这个Promise什么时候完成，i都对应它发起时的迭代值
  });
}

这个方法最推荐，写法简洁，完全符合现代JS规范。

方法2：用立即执行函数（IIFE）创建闭包（兼容旧环境） #

如果你需要兼容不支持ES6的环境，可以用IIFE把每次迭代的i包裹成独立的闭包变量，让异步回调能捕获到固定的值：

for (var i = 0; i < 4; i++) {
  // 把i作为参数传入IIFE，创建独立的currentI变量
  (function(currentI) {
    fetchSomeData(currentI).then(result => {
      console.log(`第${currentI}次请求的结果：`, result);
    });
  })(i);
}

这里的currentI是每个IIFE内部的局部变量，和循环的i完全隔离开，所以异步回调执行时它的值不会被后续迭代覆盖。

方法3：用forEach替代传统for循环 #

forEach的回调函数每次迭代都会创建新的作用域，回调参数里的index就是当前迭代的专属值，不会被后续迭代影响。写法也很直观：

// 可以直接遍历你要处理的数据源数组，或者手动生成迭代数组
[0, 1, 2, 3].forEach((i) => {
  fetchSomeData(i).then(result => {
    console.log(`第${i}次请求的结果：`, result);
  });
});

这种方法适合你已经有数据源数组的场景，不需要手动维护循环计数器。

总结一下：不管用哪种方法，核心都是让每个Promise的异步回调能捕获到一个独立于循环的、固定的变量值，这样无论Promise的实际完成顺序如何，你都能把结果和发起请求时的迭代序号准确对应起来。

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