ES9 带来了很多新的语言特性和功能，其中之一就是 for await of loop 语句。这个语句可以让我们在遍历异步迭代器时更加方便和简洁。在这篇文章中，我将会详细讲解 for await of loop 语句的使用方法和实际应用。
基本语法
for await of loop 语句的基本语法和 for of loop 语句非常类似，只是在 for 的后面加了一个 await 关键字。具体语法如下：
--- ----- ---- ---- -- --------- - -- --- -
其中，iterable 是一个异步迭代器对象，item 是每一个迭代出的值。
异步迭代器
在深入讲解 for await of loop 语句之前，我们需要先了解一下异步迭代器。
异步迭代器是一种实现异步遍历的迭代器对象。异步迭代器对象需要实现一个名为 [Symbol.asyncIterator]() 的方法，该方法需要返回一个异步迭代器对象。
----- ------------- - -
----- ------------------------- -
-- ---------
--
--注意，async 关键字用于定义一个异步方法，* 表示生成器函数的标识符。
异步迭代器对象需要实现一个 next() 方法，返回一个 Promise 对象。这个 Promise 对象的结果应该包含一个 value 属性以及一个 done 属性。value 属性表示每一次迭代的值，done 属性表示是否已经遍历完了整个迭代器。
----- ------------- - -
-- --
----- ------ -
----- --- ----------------- -- ------------------- -------
-- ------- - -- -
------ - ------ --------- ----- ----- --
-
------ - ----- ---- --
--
----- ------------------------- -
----- ------ -
----- ------ - ----- ------------
-- ------------- -
-------
-
----- -------------
-
--
--
------ -------- -- -
--- ----- ------ ---- -- -------------- -
------------------
-
-----上面这个例子中，我们定义了一个异步迭代器对象 asyncIterable。这个迭代器对象中包含一个 next() 方法，每次调用该方法，会返回一个 Promise 对象，等待 1 秒钟后再返回一个 { value: n, done: false } 对象，其中 n 是当前的迭代值，如果迭代完了整个迭代器，则返回 { done: true }。
异步迭代器对象同时还实现了 [Symbol.asyncIterator]() 方法，该方法返回一个异步迭代器对象。该异步迭代器对象使用了一个 while 循环，在每次循环中使用 next() 方法获取下一个迭代值，并使用 yield 关键字将其返回。for await of 语句遍历异步迭代器时，会调用其 [Symbol.asyncIterator]() 方法获取异步迭代器对象。
实际应用
有了异步迭代器的基础，我们就可以开始使用 for await of loop 语句来遍历异步迭代器了。
并发下载多张图片
假设我们需要从一个网站上下载多张图片，可以使用 for await of loop 语句来同时下载多张图片。
----- -------- -------------------- -
----- --------- - -------------- -- ------------
--- ----- ------ -------- -- ---------- -
----- ---- - ----- ----------------
-- ----------
-
-上面这个例子中，我们将多个图片的下载操作使用 map() 方法进行并行化处理，然后使用 for await of loop 语句遍历所有图片下载。在每次迭代时，我们可以获取到一个已经下载好的 Blob 对象（图片文件），我们可以对其进行处理，例如将其插入到页面中。
处理多个 Node.js 流
另一个实例是在 Node.js 程序中处理多个文件流。
----- -------- -------------------------- -
--- ----- ------ ----- -- ------------------------- -
-- -----
-
-
-------- ------------------------ -
------ ------ --------- -- -
--- ------ ------ -- -------- -
--- ----- ------ ----- -- ------- -
----- ------
-
-
-----
-上面这个例子中，我们将多个 Node.js 流（streams）作为参数传递给 processStreams() 函数。该函数会将多个流合并为一个流，并使用 for await of loop 语句遍历最终的流。在每次迭代时，我们可以获取到一个流中的数据块（chunk），我们可以对其进行处理，例如将其写入到文件中。
总结
for await of loop 语句是 ES9 中一个非常实用的语言特性，可以让我们更加方便地处理异步迭代器中的多个值。在实际应用中，我们可以使用 for await of loop 语句来处理并行下载多张图片、处理多个 Node.js 流等情况。当然，我们需要先了解异步迭代器的实现方式，才能更好地理解和使用 for await of loop 语句。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65421c207d4982a6ebbc289f