forEach与await引发的血案

最新推荐文章于 2026-06-14 15:48:01 发布

原创

最新推荐文章于 2026-06-14 15:48:01 发布 · 2.3k 阅读

收录于

当前文章被以下社区和专栏收录：

博客讲述了在JavaScript中，当使用forEach与async/await配合时遇到的问题。原本的同步forEach循环在方法变为异步后，await并未按预期工作。作者尝试了map和reduce，但问题依然存在。解决方案是改用普通的for循环，因为forEach内部并不等待异步操作完成。文章探讨了forEach的实现原理，指出其在ES6中引入，并提供了MDN上的polyfill源码分析。

问题描述

前段时间在做需求的时候，遇到一个关于forEach和await的坑，记录一下。

在业务代码中存在一段很普通的同步循环逻辑

function handleValueSync(value) {
   
   
    console.log(value)
}

const list = [1, 2, 3, 4, 5, 6, 7, 8];

list.forEach((value)=>handleValueSync(value))

// 结果，1，2，3，4，5，6，7，8

某一天，需求突然产生变化,原本同步的 handleValueSync 方法变成了异步的，所以我在原先代码基础上进行了简单的修改：

function handleValueAsync(value) {
   
   
    if (value % 2 === 0) {
   
   
        Promise.resolve().then(()=>{
   
   
            console.log(`${
     
     value}`)
        }
        )
    } else {
   
   
        console.log(value)
    }
}

let list = [1, 2, 3, 4, 5