ECMAScript 2018（缩写为 ES2018） 是 JavaScript 的最新标准，其中引入了许多新特性。其中一个重要的特性是异步迭代器和 for-await-of 循环，它们是支持异步迭代的新语法。
在本文中，我们将深入了解异步迭代器和 for-await-of 循环的原理和用法，并通过实例代码演示它们的功能和用途。
异步迭代器
异步迭代器是一个生成异步值的对象，您可以使用 for-await-of 循环遍历它们。这在处理异步数据流（例如从 WebSockets 或定时器中接收数据）时非常有用。
异步迭代器是通过向对象添加一个异步迭代器方法（Symbol.asyncIterator）来实现的。该方法返回一个迭代器对象，该对象包含一个 next 方法，该方法返回一个 Promise。
以下是一个异步迭代器的示例，其中产生休眠时间为随机时间的异步值：
-- -------------------- ---- -------
----- ----- - ---- -- --- ----------------- -- ------------------- -----
----- --------- ---------------- -
--- ----- - --
----- ------ - -- -
-- ------------
----- ------------------------------ - ----- - ------
----- --------
-
-我们在这个 asyncGenerator 函数中定义了一个 while 循环，用于生成异步数字。对每个数字，我们使用 await 等待一个随机的时间，然后通过 yield 生成一个异步值。
要使用该异步迭代器，可以通过它的 Symbol.asyncIterator 方法调用它：
(async () => {
for await (const num of asyncGenerator()) {
console.log(num);
}
})();此循环的输出可能看起来像以下内容，因为每个异步数字都等待了随机的时间：
0 1 2 3 4
for-await-of 循环
for-await-of 循环是用于处理异步迭代器的新循环语法。它很像普通的 for-of 循环，但是它可以处理异步值，使得我们可以在循环中使用 await 表达式。
以下是一个使用 for-await-of 循环来处理异步迭代器的示例：
(async () => {
for await (const num of asyncGenerator()) {
console.log(num);
}
})();在这个例子中，我们遍历了使用我们之前定义的异步生成器生成的异步迭代器。
需要注意的是，for-await-of 循环还可以处理普通的 Iterator 对象，只需要将普通 Iterator 对象转换为异步迭代器即可，使用 Symbol.asyncIterator 方法即可：
-- -------------------- ---- -------
----- --------- --------------------------- -
--- ------ ---- -- ------------- -
----- ----- ----------------------
-
-
------ -- -- -
--- ----- ------ --- -- ----------------- -- ---- -
-----------------
-
-----这个例子中的 asyncFromSync 函数接受一个 sync Iterable（如数组），并返回一个异步迭代器，我们可以使用 for-await-of 循环来遍历异步值，即使这些值是同步生成的。
结论
通过异步迭代器和 for-await-of 循环，我们可以方便地处理异步数据流，并在循环中使用 await 表达式处理异步值。这是一个非常有用的功能，可以帮助我们更轻松地处理异步编程中的许多不同情况。
在您进行异步编程时，请记得考虑使用异步迭代器和 for-await-of 循环来使代码更加简单，直接，并充分利用 ECMAScript 2018 引入的这些新功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6710a3ff377015f5a1a1de33