ES6 学习笔记（十一）迭代器和生成器函数
1、前言
JavaScript提供了许多的方法来获取数组或者对象中的某个元素或者属性（迭代）。从以前的for循环到之后的filter、map再到后来的for...in和for...of的迭代机制。只要具有iterator接口的都可被迭代。
2、迭代器 Iterator
2.1 含义
迭代器（iterator）为各种数据结构，提供一个统一的、简便的访问接口,简单的说，迭代可以是数组或对象的遍历方式。它使得数据结构的成员能够按某种次序排列，如上面所说，只要部署 Iterator 接口，就可以完成遍历操作。即依次处理该数据结构的所有成员。
2.2 工作过程
- 首先，创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。
- 第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员
- 第二次调用指针对象的next方法，指针就指向数据结构的第二个成员，以此类推。
- 不断调用指针对象的next方法，直到它指向数据结构的结束位置
2.3 Symbol.iterator属性
2.3.1 简介
ES6 规定，默认的 Iterator 接口部署在数据结构的Symbol.iterator属性。也就是说，只要某种数据结构具有iterator接口，就是可遍历的。常见的具有这一特点的数据结构有：Array、Map、Set、String、TypedArray（类型化的数组）、函数的 arguments 对象、NodeList 对象
2.3.2 示例1：数组的iterator示例
let arr = [1, 2, 3]
let iter = arr[Symbol.iterator]()
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());运行结果：
{ value: 1, done: false }
{ value: 2, done: false }
{ value: 3, done: false }
{ value: undefined, done: true }
其中，上面的iter返回的是一个迭代器对象，由于arr数组只有3个元素，所以经过3次的next()调用之后，第四次指针指到尾部了，已经结束了，所以获取的value值为undefined。迭代已完成，所以返回done。
2.3.3 对象的Iterator
一个对象如果要具备可被for...of循环调用的 Iterator 接口，就必须在Symbol.iterator的属性上部署遍历器生成方法（原型链上的对象具有该方法也可）。
2.3.4 示例2 实现iterator接口的自定义类示例
class RangeIterator {
constructor(start, stop, step) {
this.value = start;
this.stop = stop;
this.step = step;
}
[Symbol.iterator]() {
return this;
}
next() {
let value = this.value;
if (value < this.stop) {
this.value += this.step;
return { done: false, value: value };
}
return { done: true, value: undefined };
}
}
function range(start, stop, step = 1) {
return new RangeIterator(start, stop, step);
}
for (let value of range(0, 9, 2)) {
console.log(value);
}
输出结果： 0 2 4 6 8
2.3.5 示例3 为对象添加iterator示例
// 给对象添加iterator接口
let obj = {
data: [1, 2, 3, 4, 5, 6],
[Symbol.iterator]() {
const self = this;
let index = 0;
return {
next() {
if (index < self.data.length) {
return {
value: self.data[index++],
done: false
}
} else {
return {
value: undefined,
done: true
}
}
}
}
}
}
let sum = 0
for (let d of obj) {
sum += d
}
console.log(sum);输出结果： 21
3、生成器 Generator
3.1、含义
在前面的文章 中也提到过生成器，举个最简单的例子：
let gen = function* () {
yield 1;
yield 2;
yield 3;
}
for (let n of gen()) {
console.log(n);
}很明显，生成器的函数的function后面有个*，函数中存在yield 关键字，在函数中，通过gen()进行函数调用并生成控制器，在这里是通过循环执行函数的。
再举个例子
let obj = {
name: "Tom",
age: 20,
*[Symbol.iterator]() {
yield this.name;
yield this.age;
}
}
console.log(obj[Symbol.iterator]().next());
console.log([...obj]);
for (let k of obj) {
console.log(k);
}
输出结果： { value: 'Tom', done: false } [ 'Tom', 20 ] Tom 20
可以看到，Generator 函数返回的遍历器对象，只有调用next方法才会遍历下一个内部状态，所以其实提供了一种可以暂停执行的函数。yield表达式就是暂停标志。
3.2 工作过程
遍历器对象的next方法的运行逻辑：
- 遇到yield表达式，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值。
- 下一次调用next方法时，再继续往下执行，直到遇到下一个yield表达式。
- 如果没有再遇到新的yield表达式，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。
- 如果该函数没有return语句，则返回的对象的value属性值为undefined。
3.3 Generator 函数的return方法
举个例子：
// 生成器函数
let gen = function* () {
yield 1;
yield 2;
yield 3;
return 'ok'
}
let g = gen()
console.log(g.next());
console.log(g.next());
console.log(g.next());
console.log(g.next());
console.log(g.next());输出结果： { value: 1, done: false } { value: 2, done: false } { value: 3, done: false } { value: 'ok', done: true } { value: undefined, done: true }
由于在遍历到第三个next()时循环就已经结束了。再次遍历返回OK，done为true，再次遍历，由于指针已经到队列末尾，所以值为undefined。
如果for...of循环提前退出（通常是因为出错，或者有break语句），就会调用return方法。如果一个对象在完成遍历前，需要清理或释放资源，就可以部署return方法。
3.4 示例：定义类Fib，实现Fibonacci数列的获取
Fibonacci数列的后一个数等于前两个数之和
// 斐波拉契数列 class Fib { constructor(num) { this.num = num } *[Symbol.iterator]() { let [a, b] = [0, 1] while (true) { [a, b] = [b, a + b] if (a > this.num) return yield a } } }
let fibs = new Fib(100)
for (let f of fibs) {
console.log(f);
}
输出结果： 1 1 2 3 5 8 13 21 34 55 89
