随着 JavaScript 的发展，语言本身也在不断完善提高，ES6 以及之后的标准相继的引入了许多有趣和强大的功能和特性，其中 Generator 函数和 Iterator 接口是非常好的一个例子。
Generator 函数可以用来一步步执行代码，而不是一次性执行完，同时也可以通过 yield 语句来暂停和继续执行。而 Iterator 接口则是一种数据遍历的通用方法，通过定义遍历器对象的 next 方法，让数据结构可以被遍历。
这两个功能的结合，可以让 JavaScript 中的数据变成可迭代对象，可以用 for-of 循环来遍历数据，这是从语言层面提供的一种遍历数据的方式，非常方便和高效，下面本文将通过讲解 Generator 函数和 Iterator 接口如何实现可迭代对象的具体步骤。
实现可迭代对象的步骤
一般来说，实现一个可迭代对象，需要满足以下条件：
- 对象中具有一个方法，这个方法返回一个遍历器对象。
- 遍历器对象中实现了 next 方法，每次调用该方法可以取出下一个值。
下面我们就分步骤来分析如何通过 Generator 函数和 Iterator 接口来实现这个过程。
步骤一：定义 Generator 函数
Generator 函数是实现可迭代对象的关键，它通过 yield 语句来实现暂停和继续执行，下面是一个简单的示例：
function* gen() {
yield 1;
yield 2;
yield 3;
}这里的 gen 函数返回的是一个 Generator 对象，通过执行 gen 函数得到这个对象后，可以通过调用 next 方法来逐步执行 yield 语句。
步骤二：实现 Iterator 接口
在定义了 Generator 函数后，我们需要让这个函数返回的 Generator 对象实现 Iterator 接口，也就是需要实现 next 方法。
在 Generator 对象上实现 next 方法的步骤如下：
- 在 Generator 函数中使用 yield 语句输出序列中的值。
- 在 Generator 对象上实现 next 方法，并将 Generator 函数中执行到的位置记忆下来以供下一次调用。
下面是一个通过 Generator 函数和 Iterator 接口实现可迭代对象的示例：
-- -------------------- ---- -------
--------- ----- -
----- --
----- --
----- --
-
----- --- - ---
-------------------- - ---------- -
--- - - ------
------ -
------ -
------ -
------ ---------------
----- -----
-
-
--
--上面的代码中，obj 对象实现了 Iterator 接口，并在 obj[Symbol.iterator] 的实现中，返回了一个具有 next 方法的对象。在这个对象的 next 方法中，我们调用了 gen 函数，并依次输出了序列中的每一个值。
步骤三：遍历可迭代对象
有了实现了 Iterator 接口的 Generator 对象，就可以用 for-of 来遍历这个对象，获得序列中的每一个值。
for (let el of obj) {
console.log(el);
}使用 for-of 遍历 obj 对象时，会自动调用 obj[Symbol.iterator] 方法并得到一个遍历器对象，在每次循环中，都会调用这个遍历器对象的 next 方法，直到遍历完成。
完整代码如下：
-- -------------------- ---- -------
--------- ----- -
----- --
----- --
----- --
-
----- --- - ---
-------------------- - ---------- -
--- - - ------
------ -
------ -
------ -
------ ---------------
----- -----
-
-
--
--
--- ---- -- -- ---- -
----------------
-总结
本文介绍了如何使用 Generator 函数和 Iterator 接口实现可迭代对象，并用具体的实例解释了实现的步骤。通过使用这个方法，可以在 JavaScript 中实现一个高效、方便的数据遍历方法，换一种方式体现了 JavaScript 语言的优雅和灵活。
在实际使用中，我们可以将可迭代对象和其他一些工具和框架结合起来，提高开发效率和代码可读性，同时也可以更好地理解和使用 JavaScript 语言和框架的核心特性和设计思想。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65192ad295b1f8cacd16198c