ES6 generators in depth 一（译）
今天在学习redux-saga时，外部链接推荐了这篇文章ES6 generators in depth，所以翻译的同时也可以加深一下对Generator的理解。
这里对原文一些只能在高版本现代浏览器使用的API进行了替换。
1. 概述
Generator有两个很重要的应用：
- 实现迭代器
- 在异步调用后阻塞
1.1 借助generator实现迭代器
下面的函数将返回一个可以遍历一个对象属性的迭代器，每个属性对应一个[key, value]对：
function* objectEntries(obj) {
let propKeys = Object.keys(obj)
for(let i = 0, len = propKeys.length; i < len ; i++) {
yield [propKeys[i], obj[propKeys[i]]]
}
}
let jane = {first: 'Jane', last: 'Doe'};
const objectIter = objectEntries(jane)
let item = objectIter.next()
while(!item.done) {
const temp = item.value
console.log(`key: ${temp[0]}, value: ${temp[1]}`)
item = objectIter.next()
}
结果为：
1.2 在异步调用后阻塞
下面代码异步的获取两个JSON文件，后面代码会被阻塞，等两个请求都返回时再继续执行。
const axios = require('axios')
function* request() {
try {
let promise = yield Promise.all([
axios.get('https://zan.wilddogio.com/antd/select.json')
.then((response) => response.data),
axios.get('https://zan.wilddogio.com/antd/select.json')
.then((response) => response.data)
])
promise.then(result => {
console.log(`first: ${result[0][0].label}`)
console.log(`second: ${result[1][0].value}`)
})
} catch(e) {
console.log('Failure to read: ' + e)
}
}
const gen = request()
const item = gen.next()
gen.next(item.value)
结果如下：
2. 什么是Generator
Generator是一个可以暂停和恢复的函数，这里举一些场景：
第一个例子假设有这样一个generator函数：
function* genFunc() {
console.log('First')
yield console.log('pause')
console.log('Second')
}
genFunc有以下两点区别于一般函数：
- function后跟着一个
* - 可以通过
yield暂停
调用genFunc不会执行它，它会返回一个称之为generator对象，它可以用来控制genFunc执行：
const g = genFunc()
genFunc()会挂起在执行体开始处，调用g.next()继续执行genFunc，
g.next()
结果如下：
可以看到在打印出pause后就停止了。
继续调用g.next()
g.next()
结果Second被打印出来。
2.1 创建generator的方法
- 通过generator函数声明
function* genFunc() {}
- 通过generator函数表达式声明
const genFunc = function* (){}
- 将generator函数定义在对象字面量中
const obj = {
* genFunc() {}
}
4 作为一个成员函数（类函数）定义在class中
class MyClass{
* genFunc() {}
}
2.2 generator所扮演的角色
generator可以扮演以下角色：
-
迭代器（data producers）：每一个
yield可以通过next()返回一个value，这意味generator可以从循环或递归中有序的获取一个序列。由于generator对象实现了Iterable接口，这些序列可以被支持ES6 iterables的构造函数所处理（翻译可能不准确需要修改原文为these sequences can be processed by any ECMAScript 6 construct that supports iterables.），比如你可以直接使用for-of和展开操作符...来直接处理这个序列。 -
Observer（观察者 - 数据消费者）：yield也可以获取next()传进来的参数，这意味着generator又变成了一个数据消费者。
-
协程（Coroutines - 数据生产者与消费者）：（Given that generators are pausable and can be both data producers and data consumers, not much work is needed to turn them into coroutines (cooperatively multitasked tasks).）
下面会详细介绍这些角色到底是什么。
3 Generator迭代器（数据生产者）
在解释之前，generator对象既可以生产数据也可以消费数据，这节就阐述如何生产数据，generator实现了Iterable和Iterator接口，再次说明了generator函数即是可迭代的，也是迭代器。
interface Iterable {
[Symbol.iterator]() : Iterator;
}
iterface Iterator {
next(value? : any) : IteratorResult;
}
iterface IteratorResult {
value : any;
done : boolean
}
3.1 应用generator迭代器的方法
假设我们有这个一个generator函数
function* genFunc() {
yield 'a';
yield 'b';
}
以下三种是非常重要的用法：
第一个， for-of
for (let x of genFunc()) {
console.log(x)
}
// Output:
// a
// b
第二个, 展开(...)操作符：
let arr = [...genFunc()]; // ['a', 'b']
第三个，解构
> let [x, y] = genFunc();
> x
'a'
> y
'b'
3.2 来自generator的返回值
这块比较容易理解直接跳过了^ ^
3.3 应用generator迭代器的例子
这里我们来完成一个类似for-of功能函数forOf
function forOf(obj) {
const objSymbol = Object.getOwnPropertySymbols(obj)[0]
const o = obj[objSymbol]
let index = 0;
const keys = Object.keys(o)
return {
[objSymbol]() {
return this
},
next() {
if(index < keys.length) {
let key = keys[index]
index++
return {value: o[key], done: false}
} else {
return {
value: undefined,
done: true
}
}
}
}
}
const obj = {
[Symbol('generator')]: {
name: 'gen',
age: 18
}
}
const g = forOf(obj)
let iter = g.next()
while(!iter.done) {
console.log(iter.value)
iter = g.next()
}
结果如下：
3.4 通过yield*递归输出
yield*操作符可以在一个generator函数中调用另一个generator函数，我们先来一个简单的例子来说明如果产生数据，后面我们再解释如何加入输入。
我们提取一个公共遍历打印函数
exports.travel = function (genFunc) {
let idx = 0
const g = genFunc()
let iter = g.next()
while(!iter.done) {
console.log(`${idx}: ${iter.value}`)
idx++
iter = g.next()
}
}
const {travel} = require('./utils')
function* foo() {
yield 'a'
yield 'b'
}
function* bar() {
yield 'x'
foo()
yield 'y'
}
travel(bar)
结果如下：
可以看到foo()并没有任何输出，这时候需要yield*出场了。
function* bar() {
yield 'x'
yield* foo()
yield 'y'
}
结果如下：
基本上，yield*就是这样工作的
function* bar() {
yield 'x'
for(let value of foo()) {
yield value
}
yield 'y'
}
当然yield不仅仅可以作用在generator函数上，任意可遍历的集合都是可以的：
数组
function* bla() {
yield 'sequence'
yield* ['of', 'yield']
yield 'values'
}
travel(bla)
结果如下：
对象
const obj = {
* [Symbol.iterator]() {
const keys = Object.keys(this)
for(let i = 0, len = keys.length; i < len; i++) {
yield this[keys[i]]
}
}
}
obj.name = 'gen'
obj.age = 18
for(let a of obj) {
console.log(a)
}
