一、Generator生成器函数
在JavaScript中，一旦一个函数开始执行，就会一次执行到最后或者遇到return时结束，在函数运行期间没有任何代码可以让它在执行过程中暂停。
而Generator生成器函数的出现，使得这样一个不可能成为可能。
Generator函数是ES6提供的一种异步编程解决方案，其形式上与普通函数稍微有些差别：
- function关键字后跟一个星号(*)
- yield语句可以暂停函数
function* fn(x) {
yield ++x //第一个暂停点
yield ++x //第二个暂停点
yield ++x //第三个暂停点
}
let g = fn(0)
g.next() // {value: 1, done: false}
g.next() // {value: 2, done: false}
g.next() // {value: 3, done: false}
g.next() // {value: undefined, done: true}
我们通过以上示例可以看到：
- 在fn生成器函数中，通过yield关键字生成了三个暂停点。
- 而当我们调用fn函数时，会返回一个遍历器对象g，遍历器对象身上有一个next方法，next方法可以恢复执行，而yield表达式是暂停执行的标记。
- 每次调用next函数会返回一个对象，对象中会有value属性与done属性（value表示本次暂停点表达式的值(yield后面的值)，done表示是否遍历完成 ）
其实Generator函数会返回一带有Iterator接口的对象，这里主要讨论Generator生成器，有兴趣的话可以看看这篇文章，来了解什么是Iterator接口:https://blog.csdn.net/weixin_60297362/article/details/122838780
next方法
一般情况下，next 方法不传入参数的时候，yield 表达式的返回值是 undefined 。当 next 传入参数的时候，该参数会作为上一步yield的返回值。
function* fn(x) {
var x = yield ++x //第一个暂停点
console.log(x);
var y = yield ++x //第二个暂停点
console.log(y);
var z = yield ++x //第三个暂停点
}
let g = fn(0)
console.log(g.next())
console.log(g.next(1))
console.log(g.next(2))
return方法
return 方法返回给定值，并结束遍历 Generator 函数。
return 方法提供参数时，返回该参数；不提供参数时，返回 undefined 。
function* fn(x) {
yield ++x //第一个暂停点
yield ++x //第二个暂停点
yield ++x //第三个暂停点
}
let g = fn(0)
g.next(0) // {value: 1, done: false}
g.return('foo') // {value: 'foo', done: true}
g.next() // {value: undefined, done: true}
二、应用：解决Js异步编程(回调地狱)
要求：1s后打印111，2s后打印222，3s打印333
1.不用generator生成器
setTimeout(() => {
console.log(111);
setTimeout(() => {
console.log(222);
setTimeout(() => {
console.log(333);
}, 3000)
}, 2000)
}, 1000)
2.用generator生成器
function one() {
setTimeout(() => {
console.log(111);
iterator.next() //执行第二个暂停点
},1000)
}
function two() {
setTimeout(() => {
console.log(222);
iterator.next() //执行第三个暂停点
},2000)
}
function three() {
setTimeout(() => {
console.log(333);
},3000)
}
function * gen() {
yield one()
yield two()
yield three()
}
let iterator = gen()
iterator.next() //执行第一个暂停点