ES6 新特性之Generator
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();
}
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！