1:基本概念
实际上Generator就是遍历器的一个生成器,我们可以用Generator来生成一个遍历器。Generator有两个明显的特点:第一个是function关键字与函数名之间有一个星号,一般而言是将两者写在一起的。第二个是在函数体内部有一个yield的关键字。
function* generator(){
yield 1;
yield 2;
return 3; //return代表next的结束,对应着Generator遍历器的结束
}
const firstGenerator = generator();
//
firstGenerator.next()
{ value: 1, done: false }
firstGenerator.next()
{ value: 2, done: false }
firstGenerator.next()
{ value: 3, done: true }
firstGenerator.next()
{ value: undefined, done: true }
firstGenerator.next()
{ value: undefined, done: true }
2:执行过程
调用Generator函数后并不执行,第一次调用不执行,只有在调用next的时候才会真正的执行。
function* generator(){
console.log(1);
yield 1;
console.log(2);
yield 2;
console.log(3)
return 3;
console.log(4);
}
const gen = generator();
调用next方法开始执行,指针移向下一个状态
function* generator(){
console.log(1);
yield 1;
console.log(2);
yield 2;
console.log(3)
return 3;
console.log(4);
}
const gen = generator();
gen.next();
// 1
{ value: 1, done: false }
执行到yield或者是return语句,每一个next只能走到下一个yield或者是直接跨到了return。
function* generator() {
console.log(1);
yield 1;
console.log(2);
yield 2;
console.log(3);
return 3;
console.log(4);
}
const g = generator();
g.next();
g.next();
// 1
2
{ value: 2, done: false }
当next时,会从上一次暂停位置开始执行,直到return,return是退出next的一个标志。
function* generator() {
console.log(1);
yield 1;
console.log(2);
yield 2;
console.log(3);
return 3;
console.log(4);
}
const g = generator();
g.next();
g.next();
g.next();
g.next();
// 1
2
3
{ value: undefined, done: true }
3:Generator方法
- next,如果传了参数被当作上一个yield表达式的返回值,说明next是可以传参数的,如果没传时undefined。
function* generator(x) { var y = 3 * (yield (x + 3)); var z = yield (y / 2); return (x + y + z) * 2; } const gen1 = generator(); // gen1.next(); { value: NaN, done: false } gen1.next(); { value: NaN, done: false } */ gen1.next(); { value: NaN, done: false } */ gen1.next(); { value: undefined, done: true } function* generator(x) { var y = 3 * (yield (x + 3)); var z = yield (y / 2); return (x + y + z) * 2; } const gen2 = generator(10); gen2.next(); // { value: 13, done: false } /* x = 10 13 = 10 + 3 */ gen2.next(10); // { value: 15, done: false } /* y = 30 15 = 3 * 10 / 2 */ gen2.next(10); // { value: 100, done: false } /* z = 10 100 = (10 + 10 + 30) * 2 */
- throw,函数外抛出错误在Generator函数体内捕获
function* generator(x) { try { yield; } catch (err) { console.log('inner error', err); } } const g = generator(); g.next(); // { value: undefined, done: false } g.throw(new Error('123')) // inner error Error: 123
- return ,终结当前的Generator函数。
4:Generator函数应用
- yield*,在Generator函数内部调用另一个Generator函数,无需手动遍历。
function* generator1(){ yield* [1, 2, 3]; } generator1().next(); // { value: 1, done: false } function* generator2(){ for (var value of [1, 2, 3]) { yield value; } } generator2().next(); // { value: 1, done: false } function* generator3(){ yield [1, 2, 3]; } generator3().next(); // { value: Array(3), done: false }
5:Generator函数应用
- for of,遍历return前的数据
function* generator() { yield 1; yield 2; yield 3; return 4; } for (let s of generator()) { console.log(s); } // 1 2 3
- 状态机
const status = function* () { while (true) { console.log('On'); yield true; console.log('Off'); yield false; } }(); status.next(); // On {value: true, done: false}
- 网络请求
import axios from 'axios'; function* generator(){ const url = 'https://xxx.xxx.com'; const result = yield fetch(url); return result(); }
- 异步操作文件流