ES6系列之Generator
# 一、什么是Generator 函数
# 1.1 语法
学习
Generator语法,你需要了解function*、yield、next三个基本概念。
function*用来声明一个函数是生成器函数,它比普通的函数声明多了一个*,*的位置比较随意可以挨着function关键字,也可以挨着函数名yield产出的意思,这个关键字只能出现在生成器函数体内,但是生成器中也可以没有yield关键字,函数遇到yield的时候会暂停,并把yield后面的表达式结果抛出去next作用是将代码的控制权交还给生成器函数
// 声明生成器函数
function* generator() {
// A
yield 'foo'
// B
}
// 获取生成器对象
let g = generator();
// 第一个 next(),首次启动生成器
g.next(); // {value: "foo", done: false}
// 唤醒被 yield 暂停的状态
g.next();
// {value: undefined, done: true}
@前端进阶之旅: 代码已经复制到剪贴板
# 1.2 过程分析
// 分析一个简单例子
function* helloGenerator() {
yield "hello";
yield "generator";
return;
}
var h = helloGenerator();
console.log(h.next());//{ value: 'hello', done: false }
console.log(h.next());//{ value: 'generator', done: false }
console.log(h.next());//{ value: 'undefined', done: true }
@前端进阶之旅: 代码已经复制到剪贴板
- 创建了
h对象,指向helloGenerator的句柄 - 第一次调用
next(),执行到"yield hello",暂缓执行,并返回了"hello" - 第二次调用
next(),继续上一次的执行,执行到"yield generator",暂缓执行,并返回了"generator"。 - 第三次调用
next(),直接执行return,并返回done:true,表明结束
经过上面的分析,
yield实际就是暂缓执行的标示,每执行一次next(),相当于指针移动到下一个yield位置

总结一下,Generator函数是ES6提供的一种异步编程解决方案。通过yield标识位和next()方法调用,实现函数的分段执行