前言
在前端开发中，我们可能需要对数组、对象等数据进行遍历，以便更好地操作数据。在 JavaScript 中，迭代器和生成器是两种非常有用的工具，它们可以帮助我们更加高效地遍历数据，处理数据。
本文将从迭代器和生成器的概念入手，介绍它们的引入及在 ES10 中的使用方法，并提供详细的示例代码，帮助读者更好地理解和掌握这两个工具。
迭代器
概念
迭代器是一种设计模式，它是一个对象，可以通过 next() 方法依次访问一个聚合对象中的元素，而不用暴露该对象的内部表示。在 JavaScript 中，迭代器是一个对象，它可以遍历容器中的所有元素，每次迭代时返回一个元素。
引入
在 ES6 中，迭代器被引入到了 JavaScript 中。ES6 中的迭代器是一个普通的对象，它有一个 next() 方法，每次调用该方法都会返回一个包含 value 和 done 两个属性的对象。value 属性表示当前迭代到的值，done 属性表示迭代器是否已经遍历完了容器中的所有元素。
示例
-- -------------------- ---- ------- --- --- - --- -- -- -- --- --- -------- - ----------------------- ----------------------------- -- - ------ -- ----- ----- - ----------------------------- -- - ------ -- ----- ----- - ----------------------------- -- - ------ -- ----- ----- - ----------------------------- -- - ------ -- ----- ----- - ----------------------------- -- - ------ -- ----- ----- - ----------------------------- -- - ------ ---------- ----- ---- -
上面的代码中，我们使用了数组的 Symbol.iterator 方法获取到了一个迭代器对象，然后每次调用 next() 方法，都会返回一个包含当前迭代到的值和迭代器是否已经遍历完了容器中的所有元素的对象。
生成器
概念
生成器是一种函数，它可以用来生成迭代器。在 JavaScript 中，生成器函数是一个特殊的函数，它使用 function* 关键字定义，可以通过 yield 关键字控制函数的执行流程。
引入
在 ES6 中，生成器被引入到了 JavaScript 中。ES6 中的生成器函数使用 function* 关键字定义，并且可以通过 yield 关键字控制函数的执行流程。生成器函数返回的是一个迭代器对象，我们可以通过迭代器对象遍历生成器函数中的数据。
在 ES10 中，新增了一个方法，叫做 Object.fromEntries() 方法，它可以将一个包含键值对的数组转换成一个对象。
示例
-- -------------------- ---- ------- --------- ----------- - ----- -- ----- -- ----- -- - --- -------- - ------------ ----------------------------- -- - ------ -- ----- ----- - ----------------------------- -- - ------ -- ----- ----- - ----------------------------- -- - ------ -- ----- ----- - ----------------------------- -- - ------ ---------- ----- ---- - --- --- - ---------------------------- ------- ------- ---- ---------- ---------- ----------------- -- - ----- ------ ---- --- ------- ------ -
上面的代码中，我们定义了一个生成器函数 generator，它使用 yield 关键字控制函数的执行流程。我们通过调用 generator 函数获取到了一个迭代器对象 iterator，然后通过调用 iterator 的 next() 方法遍历了生成器函数中的数据。
另外，我们还使用了 Object.fromEntries() 方法，将一个包含键值对的数组转换成了一个对象。
结语
迭代器和生成器是 JavaScript 中非常有用的工具，它们可以帮助我们更加高效地遍历数据，处理数据。在 ES10 中，还新增了一些方法，如 Object.fromEntries() 方法，可以帮助我们更好地操作数据。我们需要深入了解迭代器和生成器的概念及使用方法，以便更好地应用它们解决实际问题。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d8ef95a941bf71340526b0