如何在Javascript中对数组的遍历使用异步函数


数组遍历

forEach 函数与 map 相似,但是它不返回结果,而是为每个元素运行该函数并丢弃结果。 实际上,重要的部分是调用函数的副作用

例如,将每个元素同步打印到控制台

const arr = [1, 2, 3]; arr.forEach((i) => { console.log(i); }); // 1 // 2 // 3 console.log("完成同步"); // 完成同步

由于结果并不重要,因此可以使用异步函数作为迭代器:

const arr = [1, 2, 3]; arr.forEach(async (i) => { // 每个元素需要花费不同的时间才能完成 await sleep(10 - i); console.log(i); }); console.log("完成异步"); // 完成异步 // 3 // 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("完成异步"); // 完成异步

进行此更改后,“完成异步”排在最后。

 

控制顺序-逐步完成

但是请注意,迭代函数是并行调用的。
若要忠实地遵循同步遍历,可以在reduce中await累加器,即如下的await memo:

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("完成异步"); // 完成异步

这样,元素会依次处理,程序执行将等待整个数组完成后再继续。

品牌vi设计公司http://www.maiqicn.com 办公资源网站大全https://www.wode007.com

结论

异步的数组遍历很容易使用,但是是用 forEach,map 或 reduce 取决于时序要求。

  • 如果你只想在任何时候运行这些功能,请使用 forEach。
  • 如果要确保继续操作之前完成操作,请使用 map。
  • 如果你需要一个一个地运行它们,请使用 reduce。


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM