在 ECMAScript 2019 (ES10) 中，新增了一个 for-await-of 语句，它可以方便地遍历异步迭代器。在前端开发中，我们经常需要处理多个异步流，比如同时获取多个接口数据，或者处理多个文件流等。本文将介绍如何使用 for-await-of 语句来同时遍历多个异步流，从而提高代码的效率和可读性。
什么是 for-await-of 语句
在 ES10 中，引入了 for-await-of 语句，它可以用于遍历异步迭代器中的值。异步迭代器是指返回 Promise 对象的迭代器，比如使用 async/await 关键字包装的迭代器。for-await-of 语句的语法如下：
for await (const value of asyncIterable) {
// do something with value
}其中 asyncIterable 是一个异步迭代器，value 是迭代器中的值。每次循环中，for-await-of 语句会等待 Promise 对象的结果，然后将结果赋值给 value。
如何同时遍历多个异步流
有时候我们需要同时处理多个异步流，比如同时获取多个接口数据，或者处理多个文件流。在 ES10 中，我们可以使用 for-await-of 语句来同时遍历多个异步流。下面是一个示例代码：
-- -------------------- ---- -------
----- -------- ------------------- -
----- ------- - -------------- -- ---------------------------
--- ----- ------ ----- -- ------------------------- -
------------------------------
-
-
-------- ------------------------ -
----- ------ - ------------------ -- -
----- ------ - --- ---------------
----------------- ----- -- ------------------- --------
---------------- -- -- --------------------
------ -------
---
------ -
----------------------- ----- --------- -- -
----- --------------- -
----- ------- ------ - ----- -------------
------------------- ------ -- ----------------------- -------
--
-- ------ --- ----- -
-------------------- ---
- ---- -
----- ------
-
-
-
--
-
-------- ----------------------- ------ -
------ --- --------------- -- -
------------------- ----- -- --------------- ---------
------------------ -- -- --------------- --------
---
-这个示例代码中，我们定义了一个 readFiles 函数，它接受多个文件路径作为参数，然后使用 fs.createReadStream 创建多个文件流。接着，我们使用 mergeStreams 函数将多个文件流合并成一个流。最后，我们使用 for-await-of 语句来遍历合并后的流，并输出每个 chunk 的内容。
mergeStreams 函数的实现比较复杂，它的作用是将多个流合并成一个流。具体来说，它首先创建多个 EventEmitter 实例，然后将每个流的 data 和 end 事件转换成 EventEmitter 实例的 data 和 end 事件。接着，它使用一个 while 循环来遍历所有的 EventEmitter 实例，每次循环中使用 Promise.race 来等待所有的 EventEmitter 实例中的 data 和 end 事件。如果某个 EventEmitter 实例触发了 end 事件，那么它就会从 events 数组中删除。如果某个 EventEmitter 实例触发了 data 事件，那么它就会将 chunk 作为 Promise 的结果返回。
总结
在本文中，我们介绍了如何使用 for-await-of 语句来同时遍历多个异步流。我们首先介绍了 for-await-of 语句的语法和用法，然后给出了一个示例代码，演示了如何将多个文件流合并成一个流，并使用 for-await-of 语句来遍历合并后的流。这个示例代码虽然比较复杂，但是它可以帮助我们更好地理解 for-await-of 语句的使用方法。在实际开发中，我们可以根据需要使用 for-await-of 语句来处理多个异步流，从而提高代码的效率和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6505246095b1f8cacd1aa75a