随着 JavaScript 的不断发展，ECMAScript 2021 引入了一项新的特性 for-await-of，使得异步编程变得更加容易和直观。在这篇文章中，我将会为大家详细介绍这个特性，以及它如何实现异步遍历 Generator 对象。
for-await-of 是什么？
for-await-of 是一个循环语句，它可以异步遍历包含 Symbol.asyncIterator 方法的对象，比如异步生成器对象 (Async Generator)、promise 链等。它可以将异步代码执行更改成同步的方式，使得代码更加易读易懂。
我们可以将 for-await-of 看作是 ES6 中的 for-of 后续版本的升级版。在 ES6 中，我们可以通过 for-of 循环来遍历所有可迭代对象 (Iterable)，包括数组、Map、Set 等，但是在处理异步任务时，并不能很好的处理。因此，在 ES2018 中，我们引入了异步生成器，以处理异步任务的迭代。而在 ES2021 中，for-await-of 则是在此基础上的一次重要升级。
如何使用 for-await-of？
下面我们将通过示例来说明如何使用 for-await-of：
-- -------------------- ---- -------
----- -------- --------------- -
----- ------------- - ------------------------- ------
--- ----- ------ ---- -- -------------- -
------------------
-
-
----- --------- -------------------------- -
--- ---- - - -- - - ------------- ---- -
----- ----------- -- ------
----- ---------
-
-
-------- --------- -
------ --- --------------- -- ------------------- -----
-
----------------在上面的示例中，我们首先创建了一个异步可迭代对象 asyncIterable，然后使用 for-await-of 来遍历它的每一个元素。此时，for-await-of 循环会自动调用 asyncIterable 的 Symbol.asyncIterator 方法，并在每一次迭代时调用异步生成器的 next 方法，以获取新的异步值。
当我们执行上面的代码时，会依次输出 "a" 和 "b"，这说明异步遍历成功。
实现异步遍历 Generator 对象
现在，我们来看一下，如何使用 for-await-of 实现异步遍历 Generator 对象。假设我们有以下的异步生成器函数：
-- -------------------- ---- ------- ----- --------- ------------------- - ----- ------------ ----- ---- ----- ------------ ----- ---- ----- ------------ ----- ---- ----- ------------ ----- ---- -
上面的函数将返回一个异步生成器对象，该对象生成了一些异步数据，每一个数据都需要等待一定时间。我们可以使用 for-await-of 来遍历这个异步生成器对象：
async function asyncFunction() {
for await (const data of generateAsyncData()) {
console.log(data);
}
}
asyncFunction();在上面的代码中，我们将异步生成器对象传递给 for-await-of 循环，借助该循环实现异步遍历。在每一次迭代时，for-await-of 会自动调用异步生成器对象的 Symbol.asyncIterator 方法，以获取新的值。因为异步生成器对象是一个已经实现了 Symbol.asyncIterator 方法的异步迭代器，所以我们可以使用 for-await-of 直接遍历。
当我们执行上面的代码时，会首先等待 1s，然后输出 "a"，接着等待 2s，输出 "b"，如此类推，最后完成整个异步遍历，输出 "d"。
总结
在本文中，我们详细介绍了 for-await-of 的使用方法，以及如何将其应用于异步生成器对象的遍历。通过学习本文，你将了解到这个新特性具有的重要性和实际应用价值，因为它可以使编写异步代码更加清晰简洁，可读性和可维护性也会相应提高。希望本篇文章对读者有所启发，让大家更好地了解 JavaScript 的新特性和语言发展，也希望大家可以多多实践，掌握更多的前端开发技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64edd693f6b2d6eab37fbe5e