如何在 Array.forEach 中正确使用 Async
2024-09-08 09:55:21
本文译自How to use async functions with Array.forEach in Javascript - Tamás Sallai。
0. 如何异步遍历元素
在第一篇文章中,我们介绍了async / await如何帮助处理异步事件,但在异步处理集合时却无济于事。在本文中,我们将研究该forEach
功能,当您需要为集合中的每个元素运行一段代码时,该功能将非常有用。
1. forEach
该forEach
函数类似于map
,但是它不转换值并使用结果,而是为每个元素运行该函数并丢弃结果(这里可以理解成是否有return
值)。实际上,重要的部分是调用函数的副作用。
例如,将每个元素同步打印到控制台:
const arr = [1, 2, 3];
arr.forEach((i) => {
console.log(i);
});
// 1
// 2
// 3
console.log("Finished sync");
// Finished sync
由于结果并不重要,因此可以使用异步函数作为迭代器:
const arr = [1, 2, 3];
arr.forEach(async (i) => {
// each element takes a different amount of time to complete
await sleep(10 - i);
console.log(i);
});
console.log("Finished async");
// Finished async
// 3
// 2
// 1
2. 控制时间
2.1 等待完成
但是,并不奇怪,该函数被异步调用,并且程序执行超出了调用范围。这是与同步版本的重要区别,因为在执行下一行时,同步forEach
已经完成,而异步版本尚未完成。这就是为什么“完成的异步”日志出现在元素之前的原因。
要在继续进行之前等待所有函数调用完成,可以使用带有Promise.all
的map
,并丢弃结果:
const arr = [1, 2, 3];
await Promise.all(arr.map(async (i) => {
await sleep(10 - i);
console.log(i);
}));
// 3
// 2
// 1
console.log("Finished async");
// Finished async
进行此更改后,“完成的异步操作”排在最后。
2.2 顺序处理
但是请注意,迭代函数是并行调用的。要忠实地遵循同步forEach
,要先使用带await memo
的reduce
:
const arr = [1, 2, 3];
await arr.reduce(async (memo, i) => {
await memo;
await sleep(10 - i);
console.log(i);
}, undefined);
// 1
// 2
// 3
console.log("Finished async");
// Finished async
这样,元素依次依次处理,程序执行将等待整个数组完成后再继续。
3. 结论
异步forEach
易于使用,但是是否应使用forEach
,map
或 reduce
取决于计时的要求。如果您只想在任何时候运行这些功能,请使用forEach
。如果要确保继续操作之前完成操作,请使用map
。最后,如果您需要一个一个地运行它们,请使用reduce
。
最新文章
- XML Basic
- IOS中(Xcode) DEBUG模式(RELEASE模式)控制NSLog输出,NSLog两种不同情况的输出方式
- Centos7 搭建hadoop2.6 HA
- [转]LOG4J汇编教程edit Z10
- js页面刷新的几种方法
- java转义字符(转载)
- Hive 6、Hive DML(Data Manipulation Language)
- Sunscreen(POJ 3614 优先队列)
- C#整理2——C#的输入输出及基本类型
- sparse autoencoder
- 学习生命周期activity
- 13 用Css做下拉菜单
- 米卡 Mica Logo 存放处
- bzoj 1015: [JSOI2008]星球大战starwar (逆向思维+并查集)
- jmeter4.0测试dubbo接口遇到的问题:An error occurred: org.springframework.scheduling.quartz.CronTriggerBean has interface org.quartz.CronTrigger as super class
- MBA(它是指营销策划,领导力和影响力,财务会计,战略和转型的IT,企业融资,用于决策的数据分析识别市场趋势获得业务优势,全球商业战略)
- Django 图片上传、存储与显示
- 2018/03/16 每日一个Linux命令 之 rm
- HTML提交方式post和get区别(实验)
- 转载: Android开源库V - Layout:淘宝、天猫都在用的UI框架,赶紧用起来吧!
热门文章
- selenium中js定位
- 三星最先进EUV产线投用
- [日志分析]Graylog2采集Nginx日志 被动方式
- macOS Catalina 升级软件问题
- isEmpty 判空函数 内部分别判断是 null 空数组 等
- niginx:duplicate MIME type ";text/html"; in nginx.conf 错误(转载)
- [Alg] 文本匹配-单模匹配与多模匹配
- 居家办公之后,鹅厂小哥发现Web开发竟能助力身体健康!
- Java基础语法(3)-运算符
- Java——写一个求和 “方法”