ES10 中引入了一种新的循环语法 for-await-of，用于处理异步迭代操作。在处理异步操作时，传统的循环语法 for-of 无法处理异步操作，而 for-await-of 可以轻松地解决这个问题。
什么是异步迭代操作？
在处理异步操作时，经常需要对一组异步操作进行迭代。例如，从多个文件中读取内容，并将它们合并成一个文件。在这种情况下，需要对每个文件进行异步读取操作，并将读取的内容进行合并。这就是异步迭代操作。
传统的循环语法无法处理异步操作
在传统的循环语法中，for-of 循环可以用于迭代数组、Set、Map、字符串等可迭代对象。例如：
const arr = [1, 2, 3];
for (const item of arr) {
console.log(item);
}但是，当需要对异步操作进行迭代时，传统的循环语法无法处理。例如：
const arr = [1, 2, 3];
for (const item of arr) {
const result = await asyncFunction(item);
console.log(result);
}上面的代码中，我们希望对数组 arr 中的每个元素进行异步操作，并将结果打印出来。但是，由于 for-of 循环不支持 await 关键字，上面的代码无法正常工作。
for-await-of 解决异步迭代操作的问题
ES10 中引入了 for-await-of 循环，可以用于处理异步迭代操作。例如：
const arr = [1, 2, 3];
for await (const item of arr) {
const result = await asyncFunction(item);
console.log(result);
}上面的代码中，我们使用 for-await-of 循环对数组 arr 中的每个元素进行异步操作，并将结果打印出来。由于 for-await-of 循环支持 await 关键字，上面的代码可以正常工作。
示例代码
下面是一个完整的示例代码，用于从多个文件中读取内容，并将它们合并成一个文件。
-- -------------------- ---- -------
----- -- - --------------
----- ---- - ----------------
----- --------- ---------------- -
--- ------ ---- -- ------ -
----- ----- ---------------
-
-
----- -------- -------------- -
------ --- ----------------- ------- -- -
----------------- ------- ----- ----- -- -
-- ----- -
------------
- ---- -
--------------
-
---
---
-
----- -------- --------------- -------- -
------ --- ----------------- ------- -- -
------------------ -------- ------- ----- -- -
-- ----- -
------------
- ---- -
----------
-
---
---
-
----- -------- ---------------------- ----------- -
----- ------- - ---
--- ----- ------ ----------- -- ---------------------- -
--------------------------
-
----- --------------------- --------------------
-
-----------
-
-------------------- -------------
-------------------- -------------
-------------------- -------------
--
-------------------- -------------
--上面的代码中，我们定义了三个异步函数 readFile、writeFile 和 readFiles，分别用于读取文件、写入文件和读取多个文件。然后，我们使用 for-await-of 循环对多个文件进行异步迭代，并将读取的内容合并后写入一个文件。
总结
ES10 中引入的 for-await-of 循环可以用于处理异步迭代操作。在处理异步操作时，传统的循环语法无法处理异步操作，而 for-await-of 可以轻松地解决这个问题。如果你经常需要处理异步迭代操作，那么 for-await-of 循环将会是你的好帮手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65dea1031886fbafa4be4040