在 ES9 （ECMAScript 2018）中，引入了 for-await-of 循环语句。该语句用于在异步可迭代对象上循环，使得我们可以更加方便地处理异步流程，简化我们的代码。
异步可迭代对象
在介绍 for-await-of 循环前，我们首先需要了解异步可迭代对象的概念。简单来说，异步可迭代对象是一个具有 [Symbol.asyncIterator] 属性的对象，该属性的值是一个方法，返回一个异步迭代器对象，该对象具有一个 next 方法，返回一个 Promise 对象。
-- -------------------- ---- -------
----- ------------- - -
------------------------ -
-- -----------
------ -
-- --
------ -
-- ------- -- -- -
------ ----------------- ----- ---- ---
-
----- ----- - --------------------------
------ ----------------- ----- ------ ----- ---
-
--
-
--上述代码中，我们定义了一个 asyncIterable 对象，它具有一个 [Symbol.asyncIterator] 属性，该属性返回一个异步迭代器对象。异步迭代器对象中的 next 方法也返回了一个 Promise 对象，用于表示当前迭代器中是否还有下一个元素。
for-await-of 循环
了解了异步可迭代对象的概念后，我们来看看 for-await-of 循环语句。
for-await-of 语句的语法如下：
for await (const value of asyncIterable) {
// do something with value
}我们可以使用 for-await-of 循环在异步可迭代对象上进行循环，依次处理每一个元素。在循环中，我们需要定义一个变量（这里为 value），用于接收异步迭代器返回的值。
-- -------------------- ---- -------
-- -----------
----- ------------- - -
------------------------ -
-- -----------
------ -
-- --
------ -
-- ------- -- -- -
------ ----------------- ----- ---- ---
-
----- ----- - --------------------------
------ ----------------- ----- ------ ----- ---
-
--
-
--
-- -------------
------ ---------- -
--- ----- ------ ----- -- -------------- -
-------------------
-
-----在上面的代码中，我们定义了一个异步可迭代对象 asyncIterable，并使用 for-await-of 循环对其进行遍历。你可以在 Console 中运行这段代码，查看输出结果。
for-await-of 循环与 Promise.all()
在异步编程中，我们通常使用 Promise.all() 方法同时执行多个异步任务，并等待它们全部结束后再进行后续操作。对于异步可迭代对象，我们同样也可以使用 for-await-of 循环来实现类似的功能。
-- -------------------- ---- -------
-- -- ------------ --------
------ ---------- -
----- -------- - -
-------------------
--- --------------- -- ------------- -- ----------- -------
-
--
--- ----- ------ - -- --------- -
---------------
-
-----上述代码中，我们定义了一个数组 promises，该数组存放了三个异步任务。接下来，我们使用 for-await-of 循环对数组中的元素进行循环，并依次处理每一个元素。
在 Console 中运行这段代码，你会看到在同步执行的任务 1 和异步执行的任务 2 之间间隔了 1 秒的等待时间。
总结
for-await-of 循环语句是 ES9 引入的新特性，用于处理异步可迭代对象。通过 for-await-of 循环，我们可以更加方便地处理异步流程，简化代码，提高代码可读性和可维护性。它是异步编程中一种很好的实践工具，值得我们学习和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64586e2a968c7c53b0acfe75