在 ES6 中，引入了两个新的关键字 iterator 和 generator，它们为 JavaScript 的迭代器提供了一种更加灵活和高效的实现方式。本文将详细介绍 iterator 和 generator 的概念、用法以及它们的指导意义。
迭代器 Iterator
在 ES6 中，迭代器（Iterator）是一种新的数据结构，它提供了一种访问集合中元素的方式，而不需要暴露集合内部的实现细节。迭代器的实现需要在对象中定义一个 next() 方法，该方法返回一个包含两个属性的对象，分别是 value 和 done。
value：表示当前迭代位置的值。done：表示迭代器是否已经遍历完所有元素。
下面是一个简单的迭代器实现示例：
-- -------------------- ---- -------
----- ---------- - -
----- --- -- ---
------ -
-- ----------- --- ---------- -
---------- - --
-
-- ----------- - ----------------- -
------ - ------ ------------------------ ----- ----- --
- ---- -
------ - ------ ---------- ----- ---- --
-
--
--在上面的代码中，我们定义了一个名为 myIterator 的迭代器对象，该对象包含一个数组属性 data 和一个 next() 方法。在 next() 方法中，我们首先判断当前迭代位置是否已经定义，如果没有则初始化为0。然后判断当前位置是否小于数组长度，如果是，则返回当前位置的值，并将位置加1；否则返回 undefined 并设置 done 为 true。
我们可以通过以下方式来使用迭代器：
for (const item of myIterator) {
console.log(item);
}当我们使用 for...of 循环遍历迭代器时，会自动调用迭代器的 next() 方法，并将返回值中的 value 属性赋值给 item，直到 done 为 true 为止。在上面的示例中，输出结果为：
1 2 3
生成器 Generator
生成器（Generator）是一种特殊的函数，它可以在执行过程中暂停，并且可以多次从暂停的位置继续执行。生成器函数使用关键字 function* 定义，而不是普通函数的 function。在生成器函数内部，我们可以使用 yield 关键字来暂停函数的执行，并将结果返回给调用者。
下面是一个简单的生成器函数示例：
function* myGenerator() {
yield 1;
yield 2;
yield 3;
}在上面的代码中，我们定义了一个名为 myGenerator 的生成器函数，该函数使用 yield 关键字返回了三个值。
我们可以通过以下方式来使用生成器：
const gen = myGenerator(); console.log(gen.next().value); // 1 console.log(gen.next().value); // 2 console.log(gen.next().value); // 3
在上面的示例中，我们首先调用 myGenerator() 函数创建一个生成器对象 gen，然后通过调用 gen.next() 来获取生成器的下一个值，直到生成器返回 done 为 true。
迭代器和生成器的指导意义
迭代器和生成器的引入，使得 JavaScript 的迭代器实现更加灵活和高效。通过迭代器，我们可以很方便地遍历集合中的元素，而不需要暴露集合的实现细节。而生成器则提供了一种更加优雅和简洁的实现方式，可以在函数执行过程中暂停和恢复执行。这些新的特性，使得 JavaScript 在处理数据集合和异步编程方面更加高效和灵活。
总结
本文详细介绍了 ES6 中的 iterator 和 generator，它们为 JavaScript 的迭代器提供了一种更加灵活和高效的实现方式。我们通过示例代码演示了迭代器和生成器的用法，并分析了它们的指导意义。这些新的特性，使得 JavaScript 在处理数据集合和异步编程方面更加高效和灵活。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c9c3e3add4f0e0ff39845b