ES6之Generator

注意：

　　Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。

　 　如果想让Generator方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。

　　具体怎么安装，请参考阮一峰的教程：http://www.ruanyifeng.com/blog/2016/01/babel.html 第六部分。

基本概念

特点：1.function 命令与函数名之间有一个 * （星号）；

　　　2.函数体内部使用yield语句定义不同的内部状态。

　　 每次调用next()方法，内部指针就从函数头部或者上一次停下来的地方开始执行。yield语句是暂停执行的标志，而next方法可以恢复执行。

    let tell = function* () {
        yield 'a';
        yield 'b';
        return 'c'
    };

    let k = tell();

    console.log(k.next());
    console.log(k.next());
    console.log(k.next());
    console.log(k.next());

执行结果：

next函数的用法

用generator实现状态机。

补充：状态机即1. 状态总数有线

　　　　　　　2. 任意时刻处在其中一种状态中
　　　　　　　3. 某种条件下，会从一种状态向另一种状态转变

let state = function*(){
    while(1){        // 无限循环
        yield 'A';
        yield 'B';
        yield 'C';
    }
}
let status = state();
console.log(status.next());
console.log(status.next());
console.log(status.next());
console.log(status.next());
console.log(status.next());
console.log(status.next());

执行结果：

yield*的语法

通过创建generate函数为obj部署一个Iterator接口

    let obj = {};
    // 通过创建generate函数为obj部署一个Iterator接口
    obj[Symbol.iterator]=function*(){
        yield 1;
        yield 2;
        yield 3;

    }
    for(let key of obj){
        console.log(key);
    }

应用举例

应用一：点击“抽奖”按钮，共N次抽奖机会，每点击一次就减少一次。

    let show = function (count){
        console.log(`剩余${count}次抽奖机会`);
    }

    // generator
    let juadge = function*(count){
        while(count>0){
            count--;
            yield show(count);
        }
    }

    // 实例化
    let number = new juadge(5);

    // 按钮触发
    let btn =document.createElement('button');
    btn.id='btn';
    btn.textContent='抽奖';
    document.body.appendChild(btn);
    document.getElementById('btn').addEventListener('click',function(){
        number.next();
    })

好处：没有把总次数存放在全局变量中（全局变量影响性能），而是以参数形式传给generator()函数。

执行结果：