ES9 带来了很多新的语言特性和功能，其中之一就是 for await of loop 语句。这个语句可以让我们在遍历异步迭代器时更加方便和简洁。在这篇文章中，我将会详细讲解 for await of loop 语句的使用方法和实际应用。
基本语法
for await of loop 语句的基本语法和 for of loop 语句非常类似，只是在 for 的后面加了一个 await 关键字。具体语法如下：
for await (let item of iterable) {
// 循环体
}其中，iterable 是一个异步迭代器对象，item 是每一个迭代出的值。
异步迭代器
在深入讲解 for await of loop 语句之前，我们需要先了解一下异步迭代器。
异步迭代器是一种实现异步遍历的迭代器对象。异步迭代器对象需要实现一个名为 [Symbol.asyncIterator]() 的方法，该方法需要返回一个异步迭代器对象。
const asyncIterable = {
async *[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 语句来同时下载多张图片。
async function downloadImages(urls) {
const downloads = urls.map((url) => fetch(url));
for await (const download of downloads) {
const blob = await download.blob();
// 处理下载好的图片文件
}
}上面这个例子中，我们将多个图片的下载操作使用 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