ES7 中新增加的 for-await-of 语句是一个非常有用的语法糖，它可以帮助我们更方便地处理异步迭代器。在本文中，我们将深入探讨 for-await-of 语句的用法，并且给出一些实际的例子，帮助你更好地理解和应用它。
为什么需要 for-await-of 语句
在 ES6 中，我们已经有了 for-of 语句，它可以用来遍历可迭代对象（比如数组、Map、Set 等）。但是，当我们需要遍历异步迭代器时，for-of 语句就不再适用了。这是因为异步迭代器返回的是 Promise 对象，而 for-of 语句只能处理同步迭代器。
为了解决这个问题，ES7 中新增加了 for-await-of 语句。它可以遍历异步迭代器，并且在每次迭代时等待 Promise 对象的解决。
for-await-of 的语法
for-await-of 语句的语法与 for-of 语句非常相似，只是在前面加了一个 await 关键字。下面是 for-await-of 语句的语法：
for await (let item of asyncIterable) {
// Do something with item
}其中，asyncIterable 是一个异步迭代器，它可以返回 Promise 对象。在每次迭代时，for-await-of 语句会等待 Promise 对象的解决，并将解决后的值赋值给 item 变量。
for-await-of 的应用
下面我们来看一些具体的例子，看看 for-await-of 语句在异步编程中的应用。
例子一：遍历异步生成器
异步生成器是一种特殊的异步迭代器，它可以通过 async function 和 yield 关键字来定义。下面是一个简单的例子：
-- -------------------- ---- -------
----- --------- ---------- -
----- --
----- --
----- --
-
------ ---------- -
--- ----- ---- ---- -- ----------- -
------------------
-
-----在这个例子中，我们定义了一个异步生成器 generate，它可以生成数字 1、2、3。然后，我们使用 for-await-of 语句遍历这个异步生成器，并将生成的数字打印出来。
例子二：遍历异步迭代器
除了异步生成器，我们还可以使用其他的异步迭代器，比如异步的数组、Map、Set 等。下面是一个遍历异步数组的例子：
-- -------------------- ---- -------
----- -------- --------- -
--- ---- - --- -- ---
------ --- --------------- -- -
------------- -- -------------- ------
---
-
------ ---------- -
--- ----- ---- ---- -- ---------- -
------------------
-
-----在这个例子中，我们定义了一个异步函数 getData，它会在 1 秒后返回一个数组。然后，我们使用 for-await-of 语句遍历这个数组，并将数组中的每个元素打印出来。
例子三：并发执行异步任务
在实际的开发中，我们经常需要并发执行多个异步任务，并等待它们全部完成后再执行下一步操作。下面是一个使用 for-await-of 语句实现并发执行异步任务的例子：
-- -------------------- ---- -------
----- -------- --------- -
--- ---- - --- -- ---
------ --- --------------- -- -
------------- -- -------------- ------
---
-
------ ---------- -
--- ----- - ----------- ---------- -----------
--- ----- ---- ------ -- ------ -
--------------------
-
---------------- ----- --- -------
-----在这个例子中，我们定义了一个数组 tasks，它包含了三个异步任务 getData。然后，我们使用 for-await-of 语句遍历这个数组，并等待所有异步任务完成后再执行下一步操作。
总结
for-await-of 语句是一个非常有用的语法糖，它可以帮助我们更方便地处理异步迭代器。在实际的开发中，我们可以使用 for-await-of 语句来遍历异步生成器、异步数组等，并且可以并发执行多个异步任务。希望本文可以帮助你更好地理解和应用 for-await-of 语句。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660663b4d10417a222492ab3