Generator
什么是 JavaScript Generators 呢？通俗的讲 Generators 是可以用来控制迭代器的函数。它们可以暂停，然后在任何时候恢复。如果这句话不好理解，可以看下接下来的示例。
1. 常规循环
for (let i = 0; i < 5; i += 1) {
console.log(i)
}
// this will return immediately 0 -> 1 -> 2 -> 3 -> 4
2. 利用 Generator
function* generatorForLoop() {
for (let i = 0; i < 5; i += 1) {
yield console.log(i)
}
}
const genForLoop = generatorForLoop()
console.log(genForLoop.next()) // first console.log - 0
console.log(genForLoop.next()) // 1
console.log(genForLoop.next()) // 2
console.log(genForLoop.next()) // 3
console.log(genForLoop.next()) // 4
对比下代码，常规的循环只能一次遍历完所有值，Generator 可以通过调用 next 方法拿到依次遍历的值，让遍历的执行变得“可控”。
基本语法
定义
function* gen() {
yield 1
yield 2
yield 3
}
let g = gen()
// "Generator { }"
这个是 Generator 的定义方法，有几个点值得注意：
- 比普通函数多一个 *
- 函数内部用 yield 来控制程序的执行的“暂停”
- 函数的返回值通过调用 next 来“恢复”程序执行
注意
Generator 函数的定义不能使用箭头函数，否则会触发 SyntaxError 错误
let generator = * () => {} // SyntaxError
let generator = () * => {} // SyntaxError
let generator = ( * ) => {} // SyntaxError
这些做法都是错误的❌。
yield 表达式
yield 关键字用来暂停和恢复一个生成器函数
关于 yield 表达式，要熟记几个知识点：
- yield 表达式的返回值是 undefined，但是遍历器对象的 next 方法可以修改这个默认值。
function* gen() {
let val
val = yield 1
console.log( `1:${val}` ) // 1:undefined
val = yield 2
console.log( `2:${val}` ) // 2:undefined
val = yield 3
console.log( `3:${val}` ) // 3:undefined
}
var g = gen()
console.log(g.next()) // {value: 1, done: false}
console.log(g.next()) // {value: 2, done: false}
console.log(g.next()) // {value: 3, done: false}
console.log(g.next()) // {value: undefined, done: true}
从这个代码可以看出来，yield 表达式的返回值是 undefined。
- yeild * 是委托给另一个遍历器对象或者可遍历对象
function* gen() {
let val
val = yield 1
console.log( `1:${val}` ) // 1:undefined
val = yield 2
console.log( `2:${val}` ) // 2:undefined
val = yield [3, 4, 5]
console.log( `3:${val}` ) // 3:undefined
}
- Generator 对象的 next 方法，遇到 yield 就暂停，并返回一个对象，这个对象包括两个属性：value 和 done。
参考步骤1 的代码可以明确看出来，执行第一句 `g.next` gen 代码执行到 yield 1，程序暂停，此时返回了一个对象：{value: 1, done: false}
方法
Generator 对象有几个方法，next、return、throw。
- next([value])
前面我们讲了，Generator 对象通过 next 方法来获取每一次遍历的结果，这个方法返回一个对象，这个对象包含两个属性：value 和 done。value 是指当前程序的运行结果，done 表示遍历是否结束。
其实 next 是可以接受参数的，这个参数可以让你在 Generator 外部给内部传递数据，而这个参数就是作为 yield 的返回值。
function* gen() {
var val = 100
while (true) {
console.log( `before ${val}` )
val = yield val
console.log( `return ${val}` )
}
}
var g = gen()
console.log(g.next(20).value)
// before 100
// 100
console.log(g.next(30).value)
// return 30
// before 30
// 30
console.log(g.next(40).value)
// return 40
// before 40
// 40
如果对上面的话和代码不理解，可以把 console.log(g.next(30).value)` ``和 console.log(g.next(40).value)` ``注释掉。你会发现 只输出了 before 100 和 100，这是为什么呢？下面我们来还原下这段代码的执行过程：
- g.next(20) 这句代码会执行 gen 内部的代码，遇到第一个 yield 暂停。所以
console.log(` before ${val} `)` ``执行输出了before 100``，此时的 val 是 100，所以执行到 yield val 返回了 100，注意 ```yield val``并没有赋值给 val。 - g.next(30) 这句代码会继续执行 gen 内部的代码，也就是
val = yield val` ``这句，因为 next 传入了 30，所以 yield val 这个返回值就是 30，因此 val 被赋值 30，执行到console.log(return ${val})``输出了 30，此时没有遇到 yield 代码继续执行，也就是 while 的判断，继续执行 ```console.log(before ${val})输出了 ```before 30`，再执行遇到了 `yield val`程序暂停。 - g.next(40) 重复步骤 2。
- return()
return 方法可以让 Generator 遍历终止，有点类似 for 循环的 break。
function* gen() {
yield 1
yield 2
yield 3
}
var g = gen()
console.log(g.next()) // {value: 1, done: false}
console.log(g.return()) // {value: undefined, done: true}
console.log(g.next()) // {value: undefined, done: true}
从 done 可以看出代码执行已经结束。
当然 return 也可以传入参数，作为返回的 value 值。
function* gen() {
yield 1
yield 2
yield 3
}
var g = gen()
console.log(g.next()) // {value: 1, done: false}
console.log(g.return(100)) // {value: 100, done: true}
console.log(g.next()) // {value: undefined, done: true}
- throw()
可以通过 throw 方法在 Generator 外部控制内部执行的“终断”。
function* gen() {
while (true) {
try {
yield 42
} catch (e) {
console.log(e.message)
}
}
}
let g = gen()
console.log(g.next()) // { value: 42, done: false }
console.log(g.next()) // { value: 42, done: false }
console.log(g.next()) // { value: 42, done: false }
// 中断操作
g.throw(new Error('break'))
console.log(g.next()) // {value: undefined, done: true}
TIP
如果想退出遍历 catch 之后可以配合 `return false` 使用，能起到 “break” 的作用
应用场景
场景1
还是前面的异步操作，按顺序读取a.json、b.json、c.json，如果使用Generator该如何实现呢？
function request(url) {
ajax(url, res => {
getData.next(res)
})
}
function* gen() {
let res1 = yield request('static/a.json')
console.log(res1)
let res2 = yield request('static/b.json')
console.log(res2)
let res3 = yield request('static/c.json')
console.log(res3)
}
let getData = gen()
getData.next()
场景2
我们经常玩一些小游戏，比如数数字，敲7，到7和7的倍数，无限循环转圈去数数
function* count(x = 1) {
while (true) {
if (x % 7 === 0) {
yield x
}
x++
}
}
// es5中就是个死循环 因为es5的循环需要有个终止值，但我们这个需求没有终止，一直在数数
let n = count()
console.log(n.next().value)
console.log(n.next().value)
console.log(n.next().value)
console.log(n.next().value)
console.log(n.next().value)
console.log(n.next().value)
通过 Generator 我们就能轻松实现，只要调用 n.next 我们就知道下一个数是什么了，而使用普通函数却没法做到。不信你试试看？