ECMAScript 2017 在 Iterator 与 Generator 方面进行了重要的升级，这些更新使得前端开发者能够更灵活、更高效地处理数据集合。在这篇文章中，我们将学习 Iterator 与 Generator 的基础概念，以及如何使用它们来简化您的代码。
基础概念
在开始学习 Iterator 与 Generator 的使用方法之前，我们先了解一下这些概念的基础。
Iterator
Iterator 是 JavaScript 中的一个接口，用于遍历数据集合。通过 Iterator，我们可以迭代一个拥有多个元素的容器，例如数组或对象。在 Iterator 中，每次迭代都会返回一个值和一个 boolean 变量，用于判断迭代是否结束。
Generator
Generator 是一种可以暂停和继续执行的函数。它与常规函数不同，因为它可以在 yield 语句处暂停。可以使用这个特性来逐步生成结果，或者使用它的返回值构建复杂数据结构。
Iterator 的使用方法
Iterator 的使用方法非常简单。通过使用它，您可以迭代一个数据集合并获取每个元素。在 ECMAScript 2017 中，您可以使用以下方法来创建 Iterator。
创建一个迭代器
在 ECMAScript 2017 中，您可以使用 Symbol.iterator 方法来手动创建一个迭代器。下面是一个使用该方法创建数组迭代器的示例代码。
const colors = ["red", "green", "blue"];
const iterator = colors[Symbol.iterator]();
console.log(iterator.next()); //{ value: "red", done: false }
console.log(iterator.next()); //{ value: "green", done: false }
console.log(iterator.next()); //{ value: "blue", done: false }
console.log(iterator.next()); //{ value: undefined, done: true }在这个示例中，我们创建了一个数组迭代器，并使用它来获取数组的每个元素。每次调用 iterator.next() 方法都会返回一个对象，其中 value 属性表示当前元素的值，而 done 属性则表示迭代是否完成。
使用 Generator 创建迭代器
Generator 的使用方法要比手动创建迭代器更加简单。使用 Generator，您可以创建一个可以自定义的迭代器，并在其中添加特定的逻辑。下面是一个使用 Generator 创建数组迭代器的示例代码。
-- -------------------- ---- -------
--------- ------------------ -
--- ---- - - -- - - ----------- ---- -
----- -------
-
-
----- ------ - ------- -------- --------
----- -------- - ----------------------
----------------------------- --- ------ ------ ----- ----- -
----------------------------- --- ------ -------- ----- ----- -
----------------------------- --- ------ ------- ----- ----- -
----------------------------- --- ------ ---------- ----- ---- -在这个示例中，我们创建了一个名为 arrayIterator 的 Generator。在该 Generator 中，我们使用 yield 保留字来暂停执行，并返回数组中的每个元素。使用 arrayIterator 创建迭代器后，我们可以使用它来迭代整个数组并获取每个元素。
Generator 的使用方法
Generator 是非常强大的工具，它可以帮助您简化代码并实现复杂的逻辑。在下面的示例代码中，我们将使用 Generator 来实现 Fibonacci 数列的生成器。
-- -------------------- ---- -------
--------- ----------- -
--- --- - --
--- --- - --
----- ------ -
----- ------- - ----
--- - ----
--- - --- - --------
----- ----- - ----- --------
-- ------- -
--- - --
--- - --
-
-
-
----- -------- - ------------
----------------------------------- -- -
----------------------------------- -- -
----------------------------------- -- -
----------------------------------- -- -
----------------------------------- -- -
--------------------------------------- -- -
----------------------------------- -- -在这个示例中，我们创建了一个名为 fibonacci 的 Generator。在该函数中，我们使用 while 循环来计算 Fibonacci 数列。使用 yield 保留字暂停 Fibonacci 函数，并返回一个 Fibonacci 数列中的值。最后，使用 next 方法来执行函数，并获取每个 Fibonacci 数列中的值。
请注意，在示例代码的最后一行中，我们使用 sequence.next(true).value 将 Fibonacci 明确重置为起始状态。
总结
在 ECMAScript 2017 中，Iterator 和 Generator 已经成为了非常重要的工具，用于处理大型数据集合和实现复杂的逻辑。掌握 Iterator 和 Generator 的使用方法将对提高您的前端开发技能和代码质量非常有帮助。在继续使用这些工具之前，请务必深入了解它们的基础概念和使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64854f3748841e989443119b