异步数组map：能否用map替代循环实现对应逻辑？

先看你原来的循环代码：

import { serialize } from 'next-mdx-remote/serialize'
...
const helperArray = []
for (const element of arrayOfObjects) {
helperArray.push({ ...element, description: await serialize(element.description)})
}

因为这里涉及异步操作（await serialize），直接用map会得到一个Promise数组，所以需要配合Promise.all等待所有异步任务完成，最终得到处理后的数组。修改后的代码如下：

import { serialize } from 'next-mdx-remote/serialize'
...
const helperArray = await Promise.all(
  arrayOfObjects.map(async (element) => ({
    ...element,
    description: await serialize(element.description)
  }))
)

逻辑说明 #

• arrayOfObjects.map()遍历每个元素，每个回调返回一个Promise（因使用async），Promise的结果就是处理后的对象
• Promise.all()会等待所有Promise执行完毕，把所有结果按原数组顺序组装成新数组，最后用await拿到这个数组赋值给helperArray
• 这样就完全替代了原来的for...of循环+手动push的逻辑，代码更简洁，也符合函数式编程的写法

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