随着 JavaScript 语言的发展，异步和迭代是现代 Web 应用程序中非常重要的概念。ES12 引入了异步迭代器和生成器函数，为开发人员提供了更加灵活和高效的方式来处理异步操作和迭代任务。本文将详细讲解 ES12 中的异步迭代器和生成器函数，包括定义、语法、使用方法和示例代码。
异步迭代器
异步迭代器是允许异步执行的迭代器。与传统同步迭代器相比，异步迭代器可以在处理每个元素时执行异步操作。异步迭代器是通过在对象上实现 Symbol.asyncIterator 方法来定义的，该方法返回一个异步迭代器实例。异步迭代器实例必须包含一个 next 方法，该方法返回一个 Promise，该 Promise 解析为具有 value 和 done 属性的对象。value 属性包含下一个元素的值，而 done 属性指示迭代器是否已经到达结尾。
以下是一个示例异步迭代器的实现：
-- -------------------- ---- -------
----- ------------- - -
------------------------ -
--- --- - --
------ -
----- ------ -
----- --- --------------- -- ------------------- -------
-- ---- - -- -
------ - ------ ------ ----- ----- --
- ---- -
------ - ------ ---------- ----- ---- --
-
-
--
-
--异步迭代器属性名称必须是 Symbol.asyncIterator，这是因为它是一个由语言内部特殊处理的符号类型。异步迭代器必须返回一个具有 next 方法的对象，next 方法必须返回一个 Promise。在上面的示例实现中，异步迭代器每秒返回一个数字，直到返回三个元素后结束。
生成器函数
生成器函数是一种特殊类型的函数，它允许您在多个时间点上返回结果。生成器函数可以通过下划线符号 _ 来标识自己，与普通函数不同，生成器函数中可以包含 yield 语句。这些 yield 语句可以暂停函数的执行，并返回一个值，这个值可以由调用者使用。生成器函数通常在异步代码中使用，因为它们允许您在异步操作完成后等待结果。
以下是一个示例生成器函数的实现：
async function fetchData() {
const data = await fetch('https://api.example.com/data');
const json = await data.json();
yield json;
}
const generator = fetchData();
generator.next().then(({ value }) => console.log(value));在上面的示例中，生成器函数获取了 JSON 数据，yield 语句暂停了函数并返回了数据。调用 next 方法将继续执行生成器函数，并将 JSON 数据作为 Promise 解析的结果返回给回调函数。
异步迭代器和生成器函数的结合使用
异步迭代器和生成器函数可以结合使用，以实现高效和灵活的异步代码。通过将异步操作放置在生成器函数中，并使用 yield 语句来暂停函数的执行，可以很容易地在异步执行的过程中进行迭代。
以下是一个示例异步迭代器和生成器函数结合使用的实现：
-- -------------------- ---- -------
----- --------- ---------------- -
--- ----- - --
----- ------ - -- -
----- --- --------------- -- ------------------- -------
----- --------
-
-
----- --------- - -----------------
------ -- -- -
--- ----- ------ --- -- ---------- -
-----------------
-
-----在上面的示例中，生成器函数 asyncGenerator 每秒生成一个数字，直到生成三个数字。异步操作通过 await 语句暂停，并返回每个数字。异步迭代器 asyncGenerator() 返回生成器函数的实例，它可以在 for-await-of 循环中迭代。循环使用 const num of generator 语句来迭代生成器，并将每个生成器返回的值赋给变量 num。在示例中， num 的值从0到2，并每秒递增一次。
总结
ES12 的异步迭代器和生成器函数是 JavaScript 语言的一项重要的新功能，它们提供了一种更加灵活和高效的方式来处理异步操作和迭代任务。本文详细讲述了这两个功能的定义、语法、使用方法和示例代码。通过这些技术，开发人员可以更加容易地编写高效的 Web 应用程序，并构建更加优秀的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648bc5c148841e9894a103f9