【读书笔记】【深入理解ES6】#8-迭代器（Iterator）和生成器（Generator）

循环语句的问题

var colors = ["red", "green", "blue"];
for (var i = 0, len = colors.length; i < len; i++) {
    console.log(colors[i]);
}

标准的for循环代码。虽然也算是简单，但是当循环多层嵌套的时候，则需要跟踪多个循环变量，不小心错误使用了其它循环的跟踪变量，则会导致程序出错。

比如常见的外层for循环使用i作为循环的索引，内层的for循环也使用了同名变量i作为循环的索引，运行时就会导致代码报错。

迭代器的出现旨在消除这种复杂性并减少循环中的错误。

什么是迭代器

迭代器是一种特殊的对象，它具有一些专门为迭代过程设计的专有接口，所有的迭代器对象都有一个next()方法，每次调用都返回一个结果对象。

结果对象有两个属性：

1. value 下一个将要返回的值
2. done 一个布尔型的值
   
   当没有更多可返回数据时返回true。

如果在最后一个值返回后再调用next()方法，结果对象中的done为false；属性value则包含迭代器最终返回的值，这个返回值不是数据集合的一部分，它与函数的返回值类似，是函数调用过程中最后一次给调用者传递信息的方法，如果没有相关数据则返回undefined。

使用ES5的语法创建一个迭代器：

function createIterator(items) {
    var i = 0;
    return {
        next: function() {
            var done = (i >= items.length);
            var value = !done ? items[i++] : undefined;

            return {
                done: done,
                value: value
            };
        }
    };
}

var iterator = createIterator([1, 2, 3]);

console.log(iterator.next()); // {done: false, value: 1}
console.log(iterator.next()); // {done: false, value: 2}
console.log(iterator.next()); // {done: false, value: 3}
console.log(iterator.next()); // {done: true, value: undefined}
// 之后所有的调用都返回相同的内容
console.log(iterator.next()); // {done: true, value: undefined}

ES6中引入了一个生成器对象，它可以让创建迭代器的过程变得简单。

什么是生成器

生成器是一种返回迭代器的函数，通过function关键字后的星号（*）来表示，函数中会用到新的关键字 yield。星号可以紧挨着function关键字，也可以在中间添加一个空格。

// 生成器
function *createIterator() {
    yield 1;
    yield 2;
    yield 3;
}

let iterator = createIterator();

console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2
console.log(iterator.next().value); // 3

每当执行完一条 yield 语句后函数就会自动停止执行。

使用 yield 关键字可以返回任何值或表达式。

// 生成器
function *createIterator(items) {
    for(let i = 0; i < items.length; i++) {
        yield items[i];
    }
}

let iterator = createIterator([1, 2,3]);

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}

生成器函数表达式

只需在function关键字和小括号中间添加一个星号即可。

let createIterator = function *(items) {
    for(let i = 0; i < items.length; i++) {
        yield items[i];
    }
}

let iterator = createIterator([1, 2,3]);

生成器对象的方法

let o = {
    createIterator: function *(items) {
        for(let i = 0; i < items.length; i++) {
            yield items[i];
        }
    }
};

let iterator = o.createIterator([1, 2, 3]);

也可以使用简写方法创建生成器

let o = {
    *createIterator(items) {
        for(let i = 0; i < items.length; i++) {
            yield items[i];
        }
    }
};

let iterator = o.createIterator([1, 2, 3]);

可迭代对象和 for-of 循环

可迭代对象具有 Symbol.iterator 属性，是一种与迭代器密切相关的对象。

Symbol.iterator 通过指定的函数可以返回一个作用于附属对象的迭代器。

在ES6中，所有集合对象（数组、Set集合及Map集合）和字符串都是可迭代对象，这些对象中都有默认的迭代器。

ES中新加入的特性 for-of 循环需要用到可迭代对象的这些功能。

let values = [1, 2, 3];

for (let num of values) {
    console.log(num);
}

这段代码的输出

1
2
3

for-of 循环通过调用 values 数组的 Symbol.iterator 方法来获取迭代器；

随后迭代器的 next() 方法被多次调用，从其返回对象的 value 属性读取值并存储在变量 num 中；

当结果对象的 done 属性为 true 时退出循环，所有 num 不会被赋值为 undefined。

访问默认迭代器

可以通过 Symbol.iterator 来访问对象的默认迭代器。

let values = [1, 2, 3];
let iterator = values[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}

使用 Symbol.iterator 来检测对象是否是可迭代对象：

function isIterable(object) {
    return typeof object[Symbol.iterator] === "function";
}

console.log(isIterable([1, 2, 3])); // true
console.log(isIterable("Hello")); // true
console.log(isIterable(new Map())); // true
console.log(isIterable(new Set())); // true
console.log(isIterable(new WeakMap())); // false
console.log(isIterable(new WeakSet())); // false

创建可迭代对象

默认情况下开发者定义的对象都是不可迭代的，但如果给 Symbol.iterator 属性添加一个生成器，则可以将其变为可迭代对象。

let collection = {
    items: [],
    *[Symbol.iterator]() {
        for (let item of this.items) {
            yield item;
        }
    }
};

collection.items.push(1);
collection.items.push(2);
collection.items.push(3);

for (let x of collection) {
    console.log(x);
}

这段代码输出以下内容：

1
2
3

内建迭代器

集合对象迭代器

ES6有三种类型的集合对象：数组、Map集合和Set集合，这3中对象都内建了以下三种迭代器：

1. entries() 返回一个迭代器，其值为多个键值对；
2. values() 返回一个迭代器，其值为集合的值（后面在运行示例时发现，数组没有该方法，但存在相同功能的迭代器）；
3. keys() 返回一个迭代器，其值为集合中的所有键名。

entries() 迭代器

返回一个数组，数组中两个元素分别表示为每个元素的键和值。

遍历对象是数组时，键是数字类型的索引；Set集合时，键同值一样；Map集合时，第一个元素为键名，第二个元素为值。

let colors = [ "red", "green", "blue" ];
let tracking = new Set([1234, 5678, 9012]);
let data = new Map();
data.set("title", "Understanding ECMAScript 6");
data.set("format", "ebook");

for (let entry of colors.entries()) {
    console.log(entry);
}

for (let entry of tracking.entries()) {
    console.log(entry);
}

for (let entry of data.entries()) {
    console.log(entry);
}

上述代码执行结果如下：

[0, "red"]
[1, "green"]
[2, "blue"]
[1234, 1234]
[5678, 5678]
[9012, 9012]
["title", "Understanding ECMAScript 6"]
["format", "ebook"]

values() 迭代器

返回集合中所存的所有值。

let colors = [ "red", "green", "blue" ];
let tracking = new Set([1234, 5678, 9012]);
let data = new Map();
data.set("title", "Understanding ECMAScript 6");
data.set("format", "ebook");

for (let value of colors) {
    console.log(value);
}

for (let value of tracking.values()) {
    console.log(value);
}

for (let value of data.values()) {
    console.log(value);
}

上述代码执行结果如下：

red
green
blue
1234
5678
9012
Understanding ECMAScript 6
ebook

关于数组的 values() 迭代器，书上示例的写法是 let value of colors.values()，但实际运行时出错了。

Uncaught TypeError: colors.values(...) is not iterable

但实际上该迭代器还是存在的，可以通过 colors[Symbol.iterator] 查看：

ƒ values() { [native code] }

因为数组的默认迭代器即为 values() 迭代器，所以可以省略 values()，直接使用变量本身 let value of colors 即可。

keys() 迭代器

返回集合中存在的每一个键。

数组类型返回数字类型的键；Set类型因为键和值相同，所有返回的也是值；Map类型返回的是所有的键。

let colors = [ "red", "green", "blue" ];
let tracking = new Set([1234, 5678, 9012]);
let data = new Map();
data.set("title", "Understanding ECMAScript 6");
data.set("format", "ebook");

for (let key of colors.keys()) {
    console.log(key);
}

for (let key of tracking.keys()) {
    console.log(key);
}

for (let key of data.keys()) {
    console.log(key);
}

执行结果：

0
1
2
1234
5678
9012
title
format

不同集合类型的默认迭代器

每个集合都有一个默认的迭代器，在 for-of 循环中，如果没有显示指定迭代器，则使用默认的迭代器。

数组和Set集合的默认迭代器是 values() 方法；Map集合的默认迭代器是 entries() 方法。

let colors = [ "red", "green", "blue" ];
let tracking = new Set([1234, 5678, 9012]);
let data = new Map();
data.set("title", "Understanding ECMAScript 6");
data.set("format", "ebook");

for (let key of colors) {
    console.log(key);
}

for (let key of tracking) {
    console.log(key);
}

for (let key of data) {
    console.log(key);
}

执行结果：

red
green
blue
1234
5678
9012
["title", "Understanding ECMAScript 6"]
["format", "ebook"]

字符串迭代器

“