ES9（ECMAScript 2018）是 JavaScript 的最新版本，它新增了一些重要的特性和功能。其中，异步迭代器和生成器方法是本文要关注的两个新特性。这两个特性能够让开发者以更加简单和灵活的方式处理异步数据。
什么是迭代器？
在学习异步迭代器和生成器方法之前，我们需要先理解迭代器的概念。在 JavaScript 中，迭代器是一种对象，用于迭代（重复）遍历数据结构中的每个元素。常见的数据结构有数组、Map、Set 和字符串等。
迭代器对象需要实现一个 next() 方法，以便在循环中一次迭代一个元素。该方法返回一个包含该元素的 value 和一个布尔值 done 的对象。当 done 的值为 true 时，表示迭代器已经到达了数据结构的末尾。
以下是一个示例代码，它演示了如何使用迭代器对象遍历一个数组：
const arr = ['apple', 'banana', 'cherry'];
const iterator = arr[Symbol.iterator]();
console.log(iterator.next()); // { value: 'apple', done: false }
console.log(iterator.next()); // { value: 'banana', done: false }
console.log(iterator.next()); // { value: 'cherry', done: false }
console.log(iterator.next()); // { value: undefined, done: true }在上面的例子中，我们使用了数组的内置迭代器对象 Symbol.iterator 来创建了一个迭代器对象 iterator。iterator.next() 方法每次调用将返回下一个元素，直到迭代器对象到达了数组的末尾。
异步迭代器
异步迭代器是 ES9 新增的一个重要特性。它允许我们以异步的方式遍历数据结构中的元素。具体实现中，异步迭代器对象需要实现一个 next() 方法，该方法返回一个 Promise 对象。
在异步迭代器中，next() 方法的实现需要等待 Promise 对象的 settled 状态，并返回一个包含 Promise resolved 值和 done 值的对象。
以下是一个使用异步迭代器遍历异步数据结构的示例：
-- -------------------- ---- -------
----- ------------- - -
----- ------------------------- -
----- -----------------------
----- -----------------------
----- -----------------------
-
--
------ -------- -- -
--- ----- ------ - -- -------------- -
---------------
-
-----
-- ---
-- ---
-- ---
-- ---在上面的代码中，我们创建了一个 asyncIterable 异步迭代器对象，它在每个元素上返回一个 Promise 对象。在遍历时，我们使用 for await...of 循环结构，读取了异步迭代器对象中所有的元素。注意，for await...of 循环结构本身也是一个异步操作，会在所有元素遍历完成后才返回。
生成器方法
生成器方法是 ES6 引入的一个重要特性，它允许我们以一种更清晰和可维护的方式构建迭代器对象。对于迭代器对象，一个生成器方法可以返回一个 IteratorResult 对象，它是一个包含值（value）和 done（是否迭代完成）两个属性的对象。
ES9 引入的新特性是，在生成器函数中使用 async yield* 语法可以支持异步迭代器。这种方式允许我们在生成器函数中使用异步的方式执行迭代逻辑，整合异步逻辑和迭代器逻辑。以下是一个使用生成器函数和异步迭代器的示例：
-- -------------------- ---- ------- ----- --------- ---------------- - ----- ----- ----------------------- ----- ----- ----------------------- ----- ----- ----------------------- - ------ -------- -- - ----- ------------- - ----------------- ----------------- ---------------------- -- - ------ ------ ----- ----- - ----------------- ---------------------- -- - ------ ------ ----- ----- - ----------------- ---------------------- -- - ------ ------ ----- ----- - ----------------- ---------------------- -- - ------ ---------- ----- ---- - -----
在上面的代码中，我们创建了一个异步迭代器 asyncGenerator()，它使用了 async yield* 语法返回了异步的值。在遍历迭代器时，我们使用了 asyncIterator.next() 方法，它会等待异步返回值，并返回一个包含 resolved 值和 done 值的对象。
总结
异步迭代器和生成器方法是 ES9 引入的新特性，它们让我们更加灵活地处理异步数据结构，能够整合异步操作和迭代操作的逻辑，增强了 JavaScript 的异步编程能力。这些新特性虽然有些复杂，但理解它们的原理和用法对于今后的前端开发工作会有很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65229a1b95b1f8cacda16aca