es6之Generator

Generator 函数是ES6提供的一种异步编程解决方案,语法行为与传统函数完全不同,可以把它理解成

  • Generator 函数是一个状态机,封装了多个内部状态
  • 执行Generator 函数会返回一个遍历器对象,也就是说Generator函数除了状态机,还是一个遍历器对象生成函数。返回的遍历器对象,可以依次遍历Generator 函数内部的每一个状态
  • 形式上Generator 函数是一个普通函数,但是有两个特征: 一是: function 关键字与函数名之间有一个星号;二是:函数体内部使用yield 表达式,定义不同的状态(yield 产出)
function* helloGenerator(){
        yield 'hello';
        yield 'world';
        return 'ending';
}
var hw = helloGenerator();
//上面代码定义了一个Generator函数,它内部有两个yield表达式,即该函数有三个状态:hello、world和return语句(结束执行)
//Generator函数的调用方法与普通函数一样,也是在函数名后面加上一对圆括号。不同的是,调用Generator函数后,该函数并不执行,返回的也不是函数运行结果,而是一个指向内部状态的指针对象,也就是一个遍历器对象
//下一步必须调用遍历器对象的next方法,使得指针移向下一个状态,也就是说每次调用next方法,内部指针就从函数头部或上一次停下来的地方开始执行,直到遇到下一个yield表达式或者return语句;***换言之,Generator函数是分段执行的,yield 表达式是暂停执行的标记,而next方法可以恢复执行***
console.log(hw.next()); //{value : hello , done : false}
console.log(hw.next()); //{value : world , done : false}
console.log(hw.next()); //{value : ending , done : true}
console.log(hw.next()); //{value : undefined , done : true}
//调用Generator函数,返回一个遍历器对象,代表Generator 函数内部指针。以后,每次调用遍历器对象的next方法,就会返回一个有着value 和 done 两个属性的对象。value属性表示当前的内部状态的值,是yield 表达式后面那个表达式的值,done 属性是一个布尔值,表示是否遍历结束
yield表达式
由于Generator 函数返回的遍历器对象,只有调用next方法才会遍历下一个内部状态,所以提供了一种可以暂停执行的函数,yield 表达式就是暂停标志
遍历器对象的next方法的运行逻辑如下:
(1)遇到yield 表达式,就暂停后面的操作,并将紧跟在yield 后面的那个表达式的值作为返回对象的value属性值
(2)下一次调用next方法,再继续往下执行,直到遇到一个yield 表达式
(3)如果没有再遇到新的yield 表达式,就一直运行到函数结束,直到return语句为止,并将return 语句后面的表达式的值,作为返回对象的value属性值
(4) 如果该函数后面没有return 语句,则返回对象的value属性值为undefined

注意:yield 表达式后面的表达式,只有当调用next 方法、内部指针指向该语句时才会执行,因此等于等于为JavaScript 提供了手动的“惰性求值”的语法功能

function* gen(){
    yield 123+456;
    return 123 + 456;
}
var a = gen();
console.log(a); //gen {<suspended>}
console.log(a.next()); //{value : 579,done : false}
console.log(a.next()); //{value : 579,done : true}
console.log(a.next()); //{value : undefined,done : true}

yield 表达式与return语句既有相似之处,也有区别,相似之处在于都能返回紧跟在语句后面的那个表达式的返回值。区别在于每次遇到yield,函数暂停执行,下一次再从该位置继续向后执行,而return 语句不具备位置记忆的功能。一个函数里面,只能执行一次(或者说一个)return 语句,但是可以执行多次(或者说多个)yield表达式。正常函数只能返回一个值,因为只能执行一次return;Generator函数可以返回一系列的值,因为可以有任意多个yield。从另一个角度来看,也可以说Generator 生成了一系列的值,这也就是它的名称的来历(generator :生成器)
Generator 函数可以不用yield 表达式,这时就变成了一个单纯的暂缓执行函数

function* f(){
   console.log('执行了');
}
f(); //函数f 是不会执行的
var generator = f();
setTimeout(function(){
    generator.next();
},3000)
 var arr = [1,[[2,3],4],[5,6],{a : 'b', c : {d : 'ddd'}}];
    var flat = function* (a){
        for(var i = 0; i < a.length; i++){
            var item = a[i];
            if(typeof item !== 'number'){
                yield* flat(item);
                //return flat(item);
            }else{
                yield item;
                //return item;
            }
        }
    }

    for(var f of flat(arr)){
        console.log(f);
    }

另外yield 放在表达式中中,必须放在圆括号里面

function* fn(){
    console.log('111');
    console.log('hello' + (yield 123));
 }
 var fnTag = fn();
 fnTag.next(); // 111
 fnTag.next(); // helloundefined

与Iterator 接口的关系
任意一个对象的Symbol.iterator 方法,等于该对象的遍历器生成函数,调用该函数就会返回该对象的一个遍历器对象;由于Generator函数就是遍历器生成函数,一次可以吧Generator 赋值给对象的Symbol.iterator属性,从而使得该对象具有Iterator 接口
next 方法的参数
yield 表达式本身没有返回值,或者说总是返回undefined,next 方法可以带一个参数,该参数就会被当做上一个yield 表达式的返回值,通过next 方法的参数就有办法在Generator 函数开始运行之后,继续向函数体内部注入值,也就是说可以在Generator 函数运行的不同阶段,从外部向内部注入不同的值,从而调整函数行为






function* foo(x){
        var y = 2 * (yield (x + 1));
        var z = yield(y/3);
        return (x+y+z);
    }
    var a = foo(5);
    //console.log(a.next()); //{value : 6,done : false}
    //console.log(a.next()); //{value : NaN,done :false}
    //console.log(a.next()); //{value : NaN, done : true}
    console.log(a.next()) //{value : 6,done : false}
    console.log(a.next(6)); //{value : 4,done :false}
    console.log(a.next(11)); //{value : 28, done : true}
    //注意:由于next方法的参数表示上一个yield 表达式的返回值,所以在第一次使用next方法,传入的参数都是无效的
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值