在 ECMAScript 2021 (ES12) 中，JavaScript 引入了一个新的循环语句：for await...of。这个新的循环语句让我们可以更方便地遍历异步迭代器，这在处理异步操作的时候非常有用。本文将介绍 for await...of 循环的语法、用法和示例代码，帮助读者更好地理解和使用这个语法。
for await...of 循环的语法
for await...of 循环的语法与 for...of 循环非常相似，只是在前面加了一个 await 关键字。具体语法如下：
for await (variable of iterable) {
// 循环体
}其中，variable 是定义的变量名，用来存储 iterable 中每个迭代项的值。iterable 是要遍历的异步迭代器，它可以是一个 Promise 对象、一个 AsyncIterable 对象或一个自定义的异步迭代器对象。循环体中的语句会在每次迭代时执行。
for await...of 循环的用法
for await...of 循环的主要用途是遍历异步迭代器。在 JavaScript 中，异步迭代器是一种特殊的迭代器，它可以异步地返回迭代项。这个特性非常有用，在处理异步操作的时候可以更方便地遍历数据。
下面是一个使用 for await...of 循环遍历异步迭代器的示例代码：
-- -------------------- ---- -------
----- -------- ---------------- -
----- -------------------------
----- --------------------------
----- --------------------------
-
----- -------- ------ -
--- ----- ---- ----- -- ----------------- -
-------------------
-
-
-------这个示例代码定义了一个异步迭代器 asyncGenerator，它会异步地返回三个水果的名字。在 main 函数中，我们使用 for await...of 循环遍历 asyncGenerator，将每个水果的名字打印到控制台上。
for await...of 循环的示例代码
下面是一些使用 for await...of 循环的示例代码，帮助读者更好地理解和使用这个语法。
示例 1：遍历 Promise.all 返回的 Promise 对象
-- -------------------- ---- -------
----- -------- ------ -
----- -------- - -------------------------- -------------------------- ---------------------------
----- ------- - ----- ----------------------
--- ----- ---- ----- -- -------- -
-------------------
-
-
-------在这个示例代码中，我们定义了一个包含三个 Promise 对象的数组 promises。我们使用 Promise.all 方法将这些 Promise 对象合并成一个新的 Promise 对象 results。然后，我们使用 for await...of 循环遍历 results，将每个水果的名字打印到控制台上。
示例 2：遍历 AsyncIterable 对象
-- -------------------- ---- -------
----- --------- --------------- -
----- -------------------------
----- --------------------------
----- --------------------------
-
----- -------- ------ -
----- -------- - ----------------
--- ----- ---- ----- -- --------- -
-------------------
-
-
-------在这个示例代码中，我们定义了一个 AsyncIterable 对象 asyncIterable，它会异步地返回三个水果的名字。然后，我们使用 for await...of 循环遍历 asyncIterable，将每个水果的名字打印到控制台上。
示例 3：自定义异步迭代器对象
-- -------------------- ---- -------
----- ------------- -
------------- -
----------- - -------------------------- -------------------------- ---------------------------
---------- - --
-
----- ------ -
-- ----------- - ------------------- -
----- ----- - ----- ------------------------
-------------
------ - ------ ----- ----- --
- ---- -
------ - ----- ---- --
-
-
------------------------ -
------ -----
-
-
----- -------- ------ -
----- -------- - --- ----------------
--- ----- ---- ----- -- --------- -
-------------------
-
-
-------在这个示例代码中，我们定义了一个自定义的异步迭代器对象 AsyncIterator。它会异步地返回三个水果的名字。我们实现了 next 方法来返回每个迭代项的值，并将这个方法绑定到 Symbol.asyncIterator 上。然后，我们使用 for await...of 循环遍历 AsyncIterator，将每个水果的名字打印到控制台上。
总结
for await...of 循环是 ECMAScript 2021 (ES12) 中引入的新语法，用来方便地遍历异步迭代器。在处理异步操作的时候，使用 for await...of 循环可以让代码更加简洁和易读。本文介绍了 for await...of 循环的语法、用法和示例代码，希望能帮助读者更好地理解和使用这个语法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d711881886fbafa44aafa4