面试：你知道为什么会有 Generator 吗-白红宇

提示: 本文是 github 上的笔记整理，代码示例也来源于此。大家有时间可以直接读这本书。虽是英文，但通俗易懂，非常推荐。

之前面试时有被问到为什么会有 Generator，还好没懵逼。想知道的吗，往下翻。

这里主要介绍 generator 的由来和一些基本概念，已经了解了或者想了解 generator 高级用法的可以看这篇

循环的问题

ES5 里遍历一个数组需要这样:

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

可以看出:

它既要追踪下标位置，

还要判断循环何时停止。

这段代码逻辑简单, 但写法复杂而枯燥。而且很常用，所以很容易因手抖而出bug。为了简化写法，降低出错机率，ES6 引入了一些新的语法，其中一个是 iterator。

什么是 iterator

iterator 也是一种对象，不过它有着专为迭代而设计的接口。它有next 方法，该方法返回一个包含 value 和 done 两个属性的对象 (下称 result )。前者是迭代的值，后者是表明迭代是否完成的标志 -- 布尔值: true 表示迭代完成，false 表示没有。iterator 内部有指向迭代位置的指针，每次调用next, 自动移动指针并返回相应的 result。

下面是一个自定义的 iterator:

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()); // "{ 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 }"// 后续的所有调用返回的结果都一样console.log(iterator.next());  // "{ value: undefined, done: true }"复制代码

可以看出，只需要我们不断执行next就可以，不需要手动追踪迭代的位置。比开篇的循环简单了些。

注意: 最后一次迭代返回的value, 并不是集合(如上例子中的 items )里的值，而是 undedined 或者函数返回值。

generator 是什么

上面虽然是比 for 循环简单了些，但手动写个 iterator 太麻烦了，所以ES6 推出 generator ，方便创建 iterator。也就是说，generator 就是一个返回值为 iterator 的函数。

其语法如下:

function* createIterator() {  yield 1;  yield 2;  yield 3;}// generators可以像正常函数一样被调用，不同的是会返回一个 iteratorlet iterator = createIterator();console.log(iterator.next().value); // 1console.log(iterator.next().value); // 2console.log(iterator.next().value); // 3复制代码

例子很明了，* 标明这是个 generators， yield 用来在调用 next时返回 value。

方法里的 generator, 可以简写:

let o = {  createIterator: function* (items) {    for (let i = 0; i < items.length; i++) {      yield items[i];    }  }};// 等同于let o = {  *createIterator(items) {    for (let i = 0; i < items.length; i++) {      yield items[i];    }  }};复制代码

可以看到，创建 generator 函数有三种方法

函数声明

function* createIterator() {...}复制代码

函数表达式

const createIterator = function* () {...}复制代码

对象里的简写方式

let o = {  *createIterator(items) {     ...   }};复制代码

可以认为，就是在函数关键字 function 和函数名之间加 *, 只不过，不同场景下关键和函数名可以省略罢了

[function] * [name]() {}// * 可以靠近关键字也可以靠近函数名，或两不靠近，都可以复制代码

注意点:

需要注意的是，yield 不能跨函数：

function* createIterator(items) {  items.forEach(function (item) {    // 语法错误    yield item + 1;  });}复制代码

箭头函数不能用做 generator

iterable 和 for-of 循环

iterable

和 iterator 紧密是相关的，有个叫 iterable 的对象。它有个 Symbol.iterator 属性，其值是个 generator 函数。

用代码描述的话，iterable 长这样：

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

ES6 里的集合如数组、set、map甚至字符串，都是 iterable。generator 创建的 iterator 都被默认添加了 Symbol.iterator ，所以，它们也是 iterable。

所有的 iterable，也都可以使用 for-of 循环。

for-of 循环

虽然有了 iterator ，只要调用它的next方法，就可以迭代了。但是，每次手动调用也太麻烦了，所以 ES6 推出了 for-of 循环:

const colors = ["red", "green", "blue"];for (let color of colors) {  console.log(color);}复制代码

对比开篇的 for 循环:

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

可以看出，for-of 循环

不用追踪迭代位置;

不用判断循环终止条件;

只需要声明变量活动每次迭代的值即可，简洁明了。

注意：for-of 只能用在 iterable 上，用其他对象上会报错。

内置的 iterator

iterator 是 ES6 里一个重要的部分，一些内置的数据类型都内置了 iterator，方便开发。

这里简要介绍下有 iterator 的数据类型。虽然简单，但不是不重要。

集合的 iterator

ES6 里的集合有三类:

数组

他们下面的 iterator 有:

entries(): 返回迭代结果为键值对的 iterator; values(): 返回迭代结果为集合里的值的 iterator; keys(): 返回迭代结果为集合里的 key 的 iterator;

下面以 map 为例：

let tracking = new Map([  ['name', 'jeyvie'],  ['pro', 'fd'],  ['hobby', 'programming']]);for (let entry of tracking.entries()) {  console.log(entry);}// ["name", "jeyvie"]// ["pro", "fd"]// ["hobby", "programming"]for (let key of tracking.keys()) {  console.log(key);}// name// pro// hobbyfor (let value of tracking.values()) {  console.log(value);}// jeyvie// fd// programming复制代码

其中 set 里的 key 和 value 相等，都是 set 里的值。数组的 key 是其下标 index, value 是里面的值。

另外，各集合都有默认的 iterator 供 for-of 调用。其执行结果，反应的是集合如何被初始化的。

如上例子 tracking ：

for (let value of tracking) {  console.log(value);}// ["name", "jeyvie"]// ["pro", "fd"]// ["hobby", "programming"]复制代码

对应这 Map 实例化是出入的子项 -- 有两个元素的数组。

其他的set、数组与之类似，不赘述了。

需要留意，经验证 chrome v65 和 node v8.0 里数组都没有 values()。也许是因为对数组而言，它比较冗余吧。

字符串的 iterator

字符串里 iterator，理解一句话就可以: 是基于 code point 而不是code unit 迭代的。比较一下两个例子:

例子1： 基于 code unit

var message = "A ? B";for (let i=0; i < message.length; i++) {    console.log(message[i]);}// A// (空)// � // � // (空)// B复制代码

例子2： 基于 code point

var message = "A ? B";for (let c of message) {  console.log(c);}// A// (空)// ? // (空)// B复制代码

基于code point可以理解为基于字符, 关于它是什么，可以查看字符串那章。

NodeList 的 iterator

以前要迭代 NodeList (元素集合)，需要用 for 循环:

// 可以这样for (var i=0, len=NodeList; i

ES6 可以直接这样:

for (let el of NodeList) {	// el 就是集合里的每个元素}复制代码

另外，现在 NodeList 也有forEach方法了

spread操作符

展开操作符 `...` 和 iterable

展开操作符可以用在所有的 iterable 上，并根据该 iterable 的默认 iterator 决定取哪个值。

比如我们可以将字符串转为数组:

[...'A?B']// ['A', '?', 'B']复制代码

结语

这里以 for 循环的问题开始，讲述 ES6 里怎么解决这个问题，由此引出 generator, 然后带出了 iterator 和 iterable, 以及操作 iterable 的 for-of。最后讲了 ES6 里结合 for-of, 能使内置集合的操作起来更加方便。

当然了，for 循环问题也许并不是最初 generator 产生的原因，generator 也不只是解决了 for 循环这一个问题，它还有更多的，在实际中的作用更大，后面我会继续发表出来。

那我为什么要写这篇文章，还成了个“标题党”呢？因为我好奇，我不只是想知道一项技术当前到底怎么用，还是知道它为何出现，想知道其来龙去脉。这样，一方面能更了解了技术，另一反面，也更能了解技术发展的趋势，这样，才能可能看得清前方啊，不至于东奔西撞，走那么多弯路。

最后，一切都是抛砖引玉，欢迎大家批评指正！

另外，generator 高级用法篇已经写完，欢迎方家指正。