为什么异步函数中forEach与for...of表现不同？如何排查、查阅源码？

待解答的核心疑问 #

• 为什么在异步函数的执行上下文下，forEach 与 for...of 的工作逻辑、执行表现存在差异？
• 如果预先不了解"forEach搭配异步函数时无法按照预期顺序执行"的特性，要通过什么方法提前识别这类适配问题？
• 是否存在可供公开查阅的 Array.prototype.forEach 源码（如开源仓库中的实现），供学习参考？

复现测试示例代码 #

// 测试用延迟配置数组
tempArray = [
  { index: 1, time: 1500 },
  { index: 2, time: 500 },
  { index: 3, time: 3000 }
];

// 搭配 forEach 的异步执行逻辑
async function asyncForEach () {
  tempArray.forEach( async item => {
    try {
        const result = await awaitFunc(item);
        console.log(`[asyncForEach] index:${result.index}, time:${result.time}`);
    } catch(e) {
        console.error('[asyncForEach] error : ', e);
    }
  })
}

// 搭配 for...of 的异步执行逻辑
async function asyncForOf () {
  for (const file of tempArray) {
    try {
      const item = await awaitFunc(file);
      console.log(`[asyncForOf] index:${item.index}, time:${item.time}`);
    } catch(e) {
      console.error('[asyncForOf] error :', e);
    }
  }
}

// 基础模拟异步延迟的Promise函数
function awaitFunc( item ) {
    return new Promise( (resolve, reject) => {
        setTimeout( () => {
            resolve(item);
            console.log(`[inside/awaitFunc] index:${item.index}, time:${item.time}`);
        }, item.time)
    });
}

// 取消注释对应函数即可开展测试
// asyncForEach()
// asyncForOf()

注意：原测试代码中asyncForEach函数存在变量重名问题——回调入参为item，回调内部又通过const item声明了同名字块级变量，会触发暂时性死区（TDZ）报错，实际调试时需要将内部变量重命名为其他名称（如示例代码中替换为result）才能正常运行。

对应问题解答 #

1. 两种遍历方式异步表现差异的核心原因 #

• Array.prototype.forEach的设计本质是同步遍历结构：内部逻辑会按数组下标顺序同步触发所有迭代回调，完全不等待单个回调的异步执行完成就进入下一轮迭代。它的返回值固定为undefined，从设计上就没有收集回调返回值、等待异步任务完成的机制。当把异步函数作为回调传入时，所有异步任务会在极短时间内全部注册完成，最终执行顺序完全由每个任务的实际完成耗时决定，和数组原有顺序无关。
• for...of是语法层面的循环结构：会严格按照迭代器返回的元素顺序逐次执行循环体内部的逻辑，当循环体内遇到await关键字时，整个循环的执行流程会被挂起，直到当前await的Promise状态变更，才会继续执行下一轮迭代，天然实现了按数组顺序串行执行异步任务的效果。

结合示例代码的实际执行结果对比：

• 执行asyncForEach时，三个定时器几乎同时启动，最终完成顺序为：500ms（index2）→1500ms（index1）→3000ms（index3），和数组定义顺序完全错位。
• 执行asyncForOf时，循环会等index1的1500ms任务完成、打印日志后，再启动index2的500ms任务，完成后再启动index3的3000ms任务，日志输出顺序和数组定义顺序完全一致。

2. 提前识别这类异步适配问题的方法 #

• 静态代码校验：在ESLint、TypeScript编译流程中开启对应规则，比如no-await-in-loop规则可以标记循环内未正确等待异步任务的写法，@typescript-eslint/no-floating-promises规则可以标记forEach回调中返回Promise但未做等待处理的场景，在编码阶段就暴露问题。
• 测试用例校验：编写单元测试时，构造带固定梯度延迟的异步任务数组，执行待校验的遍历逻辑，对比实际日志输出顺序和预期的数组顺序是否一致，不一致即说明存在异步顺序适配问题。
• 编码习惯判断：只要遍历回调内部存在await、链式Promise调用这类异步操作，就不要直接使用forEach处理，优先选择for...of、普通for循环这类支持流程挂起的遍历结构。

3. 开源可查的Array.prototype.forEach实现参考 #

• 主流开源JS引擎（V8、SpiderMonkey、JavaScriptCore）的源码仓库中，都有Array.prototype.forEach的官方实现，完全符合ECMAScript规范定义的行为，无访问限制，可供查阅。
• 适合入门学习的实现参考是各类ES5 polyfill库（如core-js）中提供的forEach兼容版本，这部分实现是纯JS编写，可读性更强，和引擎底层实现的行为完全一致。

补充说明：forEach从未原生提供“等待所有异步回调完成、按顺序执行”的能力，这类需求需要搭配Promise.all、自实现异步遍历方法等方式单独处理，不属于forEach的原生设计职责。

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