前言
在 ES6 中，Iterator 和 Generator 是两个比较重要的特性。Iterator 用于遍历集合中的元素，而 Generator 则可以产生一系列值。它们不仅在语法上大大简化了开发者的代码，还使得开发者能够更好地使用 JavaScript。
Iterator
Iterator 是一个统一的遍历集合的接口。它可以让开发者遍历任何类型的数据结构，方法是将数据结构转换成 Iterator 对象。Iterator 对象包含一个 next() 方法，每次调用 next() 方法都会返回一个包含 value 和 done 两个属性的对象，value 表示当前遍历到的值，done 表示遍历是否结束。
遍历数组
下面是一个遍历数组的例子：
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 }在这个例子中，我们使用 arrSymbol.iterator 方法得到了一个 Iterator 对象，然后使用 next() 方法依次遍历数组中的元素。
遍历字符串
除了数组，我们还可以使用 Iterator 遍历字符串。在这种情况下，每个字符被当作一个值返回。
-- -------------------- ---- ------- ----- --- - -------- ----- -------- - ----------------------- ----------------------------- -- - ------ ---- ----- ----- - ----------------------------- -- - ------ ---- ----- ----- - ----------------------------- -- - ------ ---- ----- ----- - ----------------------------- -- - ------ ---- ----- ----- - ----------------------------- -- - ------ ---- ----- ----- - ----------------------------- -- - ------ ---------- ----- ---- -
遍历 Map 和 Set
我们也可以使用 Iterator 遍历 Map 和 Set。
-- -------------------- ---- ------- ----- --- - --- ------------- ---------- -------- ------------ ----- --- - --- ------- -- ---- ----- ----------- - ----------------------- ----- ----------- - ----------------------- -------------------------------- -- - ------ - ------- -------- -- ----- ----- - -------------------------------- -- - ------ - ------- -------- -- ----- ----- - -------------------------------- -- - ------ ---------- ----- ---- - -------------------------------- -- - ------ -- ----- ----- - -------------------------------- -- - ------ -- ----- ----- - -------------------------------- -- - ------ -- ----- ----- - -------------------------------- -- - ------ ---------- ----- ---- -
Generator
Generator 是一个函数，它可以产生一系列值。与普通函数不同的是，Generator 函数可以被暂停和恢复执行。
基本用法
使用 Generator 函数需要在函数名前面加上一个星号“*”，并在函数体内使用 yield 关键字来产生值。
-- -------------------- ---- -------
--------- ----- -
----- --
----- --
----- --
-
----- -------- - ------
----------------------------- -- - ------ -- ----- ----- -
----------------------------- -- - ------ -- ----- ----- -
----------------------------- -- - ------ -- ----- ----- -
----------------------------- -- - ------ ---------- ----- ---- -在这个例子中，我们定义了一个 Generator 函数 foo()，使用 yield 关键字产生了三个值。然后我们得到了一个 Iterator 对象 iterator，使用 next() 方法依次遍历 foo() 函数产生的值。
传值与返回值
我们还可以在调用 next() 方法的时候向 Generator 函数传递值，这个值可以在 Generator 函数内部被使用。同时，Generator 函数可以使用 return 方法来返回最后一个值。
-- -------------------- ---- -------
--------- ----- -
--- - - ------
--- - - ------
--- ------ - - - --
------ -------
-
----- -------- - ------
----------------------------- -- - ------ ---------- ----- ----- -
------------------------------ -- - ------ ---------- ----- ----- -
------------------------------ -- - ------ -- ----- ---- -在这个例子中，我们定义了一个 Generator 函数 sum()，它包含了两个 yield 关键字和一个 return 语句。在调用 next() 方法的时候，我们向 sum() 函数传递了两个值，这两个值分别赋值给了变量 a 和 b。然后我们返回了 a+b 的值。值得注意的是，调用 return 方法之后，Generator 函数会直接结束，即使后面还有 yield 语句。
生成器和迭代器
在前面的例子中，我们使用了一个 Generator 函数 foo()，然后得到了一个 Iterator 对象 iterator。真正的魔力在于，我们还可以将这两者结合起来使用。
-- -------------------- ---- -------
--------- ----- -
----- --
----- --
-
--- ---- ----- -- ------ -
-------------------
-
-- ---
-- ----- -------- - ------
-- ----- ------ -
-- ----- ------ - ----------------
-- -- ------------- ------
-- --------------------------
-- -
-- --
-- -
-- -在这个例子中，我们定义了一个 Generator 函数 foo()，然后在 for...of 循环中使用了它。for...of 循环会得到一个 Iterator 对象，然后依次遍历 foo() 函数产生的值。在这个例子中，我们得到的输出结果是 1 和 2。
总结
在 ES6 中，Iterator 和 Generator 是两个很有用的特性。它们可以让开发者更加高效地遍历和产生数据。学习和使用它们可以让我们的代码更加简洁和易读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6653f4dcd3423812e488474e