ES6之generator函数

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

猜你喜欢