在 ES6 中，迭代器和生成器是两个非常重要的概念。它们可以让 JavaScript 开发者写出更加简洁、易读、易维护的代码。在本文中，我们将详细探讨迭代器和生成器的概念、用法和实例等内容，希望可以帮助你更好地理解和使用它们。
什么是迭代器？
迭代器是一种按照特定顺序访问某个集合中所有元素的机制。在 JavaScript 中，一个对象如果具有 Symbol.iterator 属性，那么它就是可迭代的（iterable）。通过迭代器，我们可以将一个可迭代对象中的每一个元素依次访问、操作，而无需手动迭代。
比如下面的代码：
const arr = [1, 2, 3];
const iterator = arr[Symbol.iterator]();
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }在这个例子中，通过 arr[Symbol.iterator]() 方法，我们获取到了数组 arr 的迭代器。然后我们使用 iterator.next() 方法依次访问了数组中的每一个元素。注意到最后一次调用 next() 方法返回的是 { value: undefined, done: true }，这说明已经迭代到了数组的末尾。
在本例中，数组 arr 就是一个可迭代的对象。除了数组之外，ES6 还提供了多种可迭代对象，如 Set、Map、String 等，它们也都可以通过相应的方法获取到它们的迭代器。
什么是生成器？
生成器（Generator）是一种异步编程的解决方案，它可以让我们以一种更好的方式组织和管理异步任务。通过生成器，我们可以将异步任务拆分为多个步骤进行处理，而不必担心回调地狱和异步代码的可读性和可维护性问题。
生成器关键字是 function*，而生成器函数和普通函数的区别在于，生成器函数可以用 yield 关键字暂停自己的执行，并返回一个值。这样我们就可以在异步代码中按照一定的步骤依次执行任务，而不必担心嵌套回调和代码可读性问题。
下面是一个简单的生成器实例，它用到了 yield 关键字：
-- -------------------- ---- ------- --------- ------- - --------------------- ------ --------------------- - ----- -------- - -------- ---------------- -- -- ----------- ---------------- -- -- -----------
在这个例子中，我们定义了一个生成器函数 greet，它使用了 yield 关键字。在调用 iterator.next() 方法时，我们首先输出了 Hello，但是执行到 yield 关键字时，greet 函数暂停了自己的执行，并返回了一个值 undefined。在下一次调用 iterator.next() 方法时，我们输出了 World，并结束了 greet 函数的执行。
需要注意的是，在调用 iterator.next() 方法时，如果我们向它传递了一个参数，那么这个参数就会被当做上一次 yield 语句返回的值。这样我们就可以通过生成器函数的多次调用，逐步完成一个复杂的异步任务，而不必担心嵌套回调和代码可读性问题。
迭代器和生成器的实用战例
实用战例一：遍历树形结构
迭代器和生成器适用于遍历具有嵌套结构的数据，例如树形结构。下面是一个简单的树形结构：
-- -------------------- ---- -------
----- ---- - -
------ --
--------- -
-
------ --
--------- -
- ------ - --
- ------ - -
-
--
-
------ --
--------- -
- ------ - --
-
------ --
--------- -
- ------ - -
-
-
-
--
-
------ --
--------- --
-
-
--我们可以使用迭代器和生成器遍历这个树形结构，并输出其中所有的 value 值。下面是使用迭代器实现的方式：
-- -------------------- ---- -------
--------- ----------------- -
----- -----------
--- ---- ----- -- -------------- -
------ -------------------
-
-
----- -------- - ------------------
--- ---- ----- -- --------- -
-------------------
-在这段代码中，我们定义了一个生成器函数 flattenTree，它接收一个树形结构作为参数。在函数中，我们先输出了当前节点的 value 值。然后我们使用 for...of 循环遍历当前节点的子节点，并逐一执行 flattenTree 函数。这样我们就可以递归遍历整棵树了。
实用战例二：异步数据处理
异步数据处理是前端开发中的常见场景之一。使用生成器函数，我们可以有效地组织和管理异步任务。下面是一个简单的异步数据处理实例：
-- -------------------- ---- -------
-------- ----------- -
------ --- --------------- -- -
------------- -- -
--------- ----- --- -- -- ---
-- ------
---
-
--------- ------------- -
----- ---- - ----- ------------
------------------ -- -- - ----- --- -- -- -
----- ------ - ---------------------- ---- -- --- - ---- ---
-------------------- -- -- -
----- -------- - ----- -------------------------------------------
----- ---- - ----- ----------------
------------------ -- -- --- ----
-
-------- -------------- -
----- -------- - ------------
-------- -------------- -
-- ------------- -
-------
-
----- ------- - ------------------------------
---------------- -- -
---------------------------
---
-
------------------------
-
-----------------在这个例子中，我们定义了一个异步数据处理的流程，它包含了两个异步任务：一个是通过 fetchData 获取数据，另一个是将数据提交给一个 API 并获取响应数据。
在 processData 函数中，我们使用 yield 关键字暂停了生成器函数的执行，并将异步任务封装成一个 Promise 对象。在 run 函数中，我们实现了一个递归调用的方式，将生成器函数中的所有异步任务都按照一定的顺序执行。
总结
ES6 中的迭代器和生成器是 JavaScript 开发中非常重要的两个概念。通过它们，我们可以简化异步任务的代码组织和管理方式，也可以更方便地处理具有嵌套结构的复杂数据。希望本文的内容能够帮助你更好地理解和使用迭代器和生成器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645a1232968c7c53b0c306ab