- generator函数定义
/*Generator生成器函数:顾名思义,它是一个生成器,它也是一个状态机,内部拥有值及相关的状态,生成器返回一个迭代器Iterator对象,我们可以通过这个迭代器,手动地遍历相关的值、状态,保证正确的执行顺序。用于解决ajax的异步编程解决方案。*/
// 存在形式
function* 函数名() {
// 执行内容
}
// 调用方式
函数名();//这种方式没有办法执行
↓↓↓
let 变量 = 函数名();
变量.next();
变量.next().value;//获取函数的返回值
- 相关概念之一 yield
// 在generator函数的执行中,出现yield关键字就暂停执行,其后内容当遇到next()执行
function* next_id() {
let x = 1;
while(x){
yield x++;
}
}
let g = next_id();
console.log(g.next().value);//1
console.log(g.next().value);//2
console.log(g.next().value);//3
console.log(g.next().value);//4
...
- 相关概念之二 yield*
function* gen(){
yield* ["a", "b", "c"];
}
let g = gen();
console.log(g.next().value);//a
console.log(g.next().value);//b
console.log(g.next().value);//c
/* 当yield*为一个数组时,基本可以相当于for...of语法 */
//for...of
let arr = [3, 5, 7];
for(let i of arr){
console.log(i);//3 5 7
}
- 相关概念之三 next
//1)return终结遍历,之后的yield语句都失效;next返回本次yield语句的返回值。
//2)return没有参数的时候,返回{ value: undefined, done: true };next没有参数的时候返回本次yield语句的返回值。
//3)return有参数的时候,覆盖本次yield语句的返回值,也就是说,返回{ value: 参数, done: true };next有参数的时候,覆盖上次yield语句的返回值,返回值可能跟参数有关(参数参与计算的话),也可能跟参数无关(参数不参与计算)。
function* fib(max) {
var
t,
a = 0,
b = 1,
n = 0;
while (n < max) {
yield a;
[a, b] = [b, a + b];
n ++;
}
return;
}
var f = fib(5);
f.next(); // {value: 0, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 2, done: false}
f.next(); // {value: 3, done: false}
f.next(); // {value: undefined, done: true}
//next()函数在调用时可以传参.
function* showNumbers() {
var one = yield 1;
var two = yield 2 * one;
yield 3 * two;
}
var g = showNumbers();
g.next().value // 1
g.next().value // NaN one的值并不会保留
g.next(2).value // 6 --> 3*2 2为传递的参数
生成器函数给异步回调一种新的构思思路,函数内的内容可以分步执行,通过相应语法多次返回,顺序编写异步函数,对于回调地狱提供了一种新的解决思路.在函数运行过程中,通过yield分步执行代码,用next()有选择的执行下一步.具体可以和promise做对比,食用更佳!
参考文档:廖雪峰官网之generator