在前端开发中，我们经常需要对数组进行循环操作，进行一些数据处理和业务逻辑的处理。ES7 中提供了 forEach 和 async/await 两种方式来循环数组，这篇文章将详细介绍它们的使用和区别。
forEach 循环数组
在 ES5 中，我们通常使用 for 循环来遍历数组中的元素。在 ES6 中，我们可以使用 for/of 循环来进行数组的遍历。而在 ES7 中，forEach 成为了新的可选项，用来遍历数组。它的语法如下：
----------------------- ------ -- - -- --------- ---
其中，element 是数组中的每个元素，而 index 则是元素的索引值。
示例代码：
----- ------- - ------------ ------------------------ ------ -- - -------------- ---------- ---- ------------ ---
在 forEach 中，我们可以做任何循环操作，并且可以直接修改数组元素的值。但是它有一个局限性，就是它是同步执行的，它并不关心每个元素的处理时间和顺序。这就导致它不能够用于需要异步处理的情况。
async/await 循环数组
为了解决 forEach 的局限性，ES7 引入了 async/await，这是一种异步处理方式，可以用于处理需要异步操作的情况。它的语法如下：
----- -------- ------------------- -
--- ------ ------- -- ------ -
----- -----------------------------
-
-在 async/await 循环数组中，我们使用 for/of 循环数组中的每个元素。在循环内部调用异步操作 processArrayElement，使用 await 关键字保证它的异步执行。这样，就可以保证每个元素的处理顺序和时间，同时避免了阻塞线程。
示例代码：
----- -------- ----------------------- -
--- ------ ------ -- -------- -
----- ----------------------
-
-在上面的代码中，我们定义了一个异步操作 processNumber，它可以用于对每个数字进行异步处理。在调用 processNumbers 的时候，会对每个数字进行异步处理，并且按顺序输出数字。
总结
在日常开发中，我们经常需要循环遍历数组，进行数据处理，其中 forEach 是用于同步处理的，适用于简单的循环操作。而 async/await 则是用于异步处理的，适用于复杂的异步场景，它可以保证每个元素的处理时间和顺序。虽然它们有不同的使用场景，但它们在处理数组上都能很好地工作。
参考文献
- MDN Web Docs: Array.prototype.forEach()
- MDN Web Docs: async function
- 阮一峰：async 函数
- 知乎：JavaScript 异步循环的 4 种方法
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654eee7f7d4982a6eb7fd342