在现代前端开发中，我们不仅仅需要掌握基础的 HTML、CSS 和 JavaScript 技能，我们还需要深入了解语言的高级特性，如 ES6 中引入的 Iterator 和 Generator。
Iterator
Iterator 简介
Iterator （迭代器）是一种接口，它为各种不同的数据结构提供了统一的访问机制。在 ES6 中，许多新的数据结构被添加，如 Set、Map、Array、字符串等，这些数据结构都可以通过迭代器的方式访问和遍历。
为了实现 Iterator 接口，我们需要在对象上定义一个 Symbol.iterator 属性，该属性应该返回一个具有迭代能力的对象（也就是实现了 next() 方法的对象）。而调用 next() 方法，则会返回一个迭代器对象，该对象具有两个属性：value 和 done。value 属性是下一次要返回的值，done 表示当前的迭代是否已经完成。
下面是一个简单的例子，展示了如何用迭代器访问一个数组：
const arr = ['a', 'b', 'c'];
const iter = arr[Symbol.iterator]();
console.log(iter.next()); // {value: 'a', done: false}
console.log(iter.next()); // {value: 'b', done: false}
console.log(iter.next()); // {value: 'c', done: false}
console.log(iter.next()); // {value: undefined, done: true}Iterator 的应用场景
Iterator 可以应用在许多场合中，如：
- 遍历数据结构（例如数组、Set、Map 等）
- 自定义迭代器
- 迭代器生成器（Generator）
我们可以通过 for...of 语句轻松地使用迭代器遍历数组、Set、Map 等数据结构：
-- -------------------- ---- ------- ----- --- - ----- ---- ----- --- ---- ---- -- ---- - ------------------ -- ---- ---- --- - ----- --- - --- --------- ---- ------ --- ---- ---- -- ---- - ------------------ -- ---- ---- --- - ----- --- - --- ---------- --- ----- --- ----- ----- --- ---- ----- ------ -- ---- - ---------------- ------- -- --- -- --- -- --- - -
我们也可以自定义迭代器，从而可以使用 for...of 语句遍历我们自定义的数据结构。下面是一个简单的例子，展示了如何自定义一个简单的迭代器：
-- -------------------- ---- -------
----- ---------- - -
-------------------- -
----- --
----- --
----- --
-
--
--- ---- ----- -- ----------- -
------------------- -- -- -- -
-Generator
Generator 简介
Generator 是 ES6 中的一项新特性，它可以让我们写出更加优美和易维护的异步代码。
Generator 函数看起来像普通函数，但有两个显著的区别。第一，Generator 函数在被调用时不会立即执行，而是返回一个迭代器对象。第二，Generator 函数可以使用 yield 关键字来定义生成器的返回值。每次调用 next() 方法会执行生成器的下一个 yield 表达式，直到遇到 return 语句或者遍历完生成器的所有表达式，此时迭代器对象的 done 属性将被设置为 true。
下面是一个简单的例子，展示了如何定义和使用 Generator 函数：
-- -------------------- ---- ------- --------- ----- - ----- -- ----- -- ----- -- - ----- ---- - ------ ------------------------- -- ------- -- ----- ------ ------------------------- -- ------- -- ----- ------ ------------------------- -- ------- -- ----- ------ ------------------------- -- ------- ---------- ----- -----
Generator 的应用场景
Generator 主要应用在异步编程中，例如 async/await、co 等库都是基于 Generator 实现的。我们可以像下面这样使用 Generator 函数进行异步编程：
-- -------------------- ---- -------
--------- --------- -
--- -
----- ------- - ----- ------------------
----- ------- - ----- ------------------
------ --------- ---------
- ----- ------- -
---------------------
-
-
-------- -------------- -
----- ---- - ------------
-------- ----------- -
----- ------ - -----------------
-- ------------- -
------ -------------
-
------------------
-------- -- -
---------------
--
----- -- -
------------------
-
--
-
-------
-
---------------------- -- -
------------------------- --------------
---在上面的代码中，我们首先定义了一个 getData 的 Generator 函数，该函数定义了两个异步操作，分别是访问 /api/foo 和 /api/bar 接口。然后我们定义了一个 run 函数，该函数负责执行 Generator 函数，将异步调用的结果逐步传递给下一个 yield 表达式。最后我们调用 run(getData) 来执行 Generator 函数，并在 then 方法中输出结果。
总结
在本文中，我们详细介绍了 ES6 中的 Iterator 和 Generator 的概念和用法，并且给出了一些实例代码来说明如何应用 Iterator 和 Generator。通过我们的学习，我们可以更加深入地了解 JavaScript 的高级特性，提高我们的编程能力，让我们写出更加优美和易于维护的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653a28097d4982a6eb3f6ad1