es6解读7- Generator

Generator

基本概念

Generator函数有多种理解角度。从语法上，首先可以把它理解成，Generator函数是一个状态机，封装了多个内部状态。

执行Generator函数会返回一个遍历器对象，也就是说，Generator函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历Generator函数内部的每一个状态。

形式上

• Generator函数是一个普通函数，但是有两个特征。
  • function关键字与函数名之间有一个星号*；
  • 函数体内部使用yield语句，定义不同的内部状态（yield语句在英语里的意思就是“产出”）。

let tell=function* () {
    yield 'a';
    yield 'b';
    yield 'c';
};
let k=tell();
console.log(k.next());
console.log(k.next());
console.log(k.next());
console.log(k.next());

上面代码定义了一个Generator函数tell，它内部有三个yield语句'a'，'b'和'c' ; 即该函数有三个状态：'a'，'b'和'c'语句（结束执行）。

总结一下，调用Generator函数，返回一个遍历器对象，代表Generator函数的内部指针。以后，每次调用遍历器对象的next方法，就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值，是yield语句后面那个表达式的值；done属性是一个布尔值，表示是否遍历结束。true：表示遍历结束，false：表示遍历没结束；

yield

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

function* gen() {
  yield  123 + 456;
}

上面代码中，yield后面的表达式123 + 456，不会立即求值，只会在next方法将指针移到这一句时，才会求值。

yield语句注意事项

• yield语句不能用在普通函数中，否则会报错。
• yield语句如果用在一个表达式之中，必须放在圆括号里面。

console.log('Hello' + yield); // SyntaxError
console.log('Hello' + yield 123); // SyntaxError

console.log('Hello' + (yield)); // OK
console.log('Hello' + (yield 123)); // OK

• yield语句用作函数参数或赋值表达式的右边，可以不加括号。

foo(yield 'a', yield 'b'); // OK
let input = yield; // OK

暂缓执行函数

Generator函数可以不用yield语句，这时就变成了一个单纯的暂缓执行函数。

function* f() {
  console.log('执行了！')
}

var generator = f();

setTimeout(function () {
  generator.next()
}, 2000);

上面代码中，函数f如果是普通函数，在为变量generator赋值时就会执行。但是，函数f是一个Generator函数，就变成只有调用next方法时，函数f才会执行。

Generator 与 Iterator接口的关系

任意一个对象的Symbol.iterator方法，等于该对象的遍历器生成函数，调用该函数会返回该对象的一个遍历器对象。

由于Generator函数就是遍历器生成函数，因此可以把Generator赋值给对象的Symbol.iterator属性，从而使得该对象具有Iterator接口。

//generator对象的新应用：给obj对象部署Iterator;
let obj={};
obj[Symbol.iterator]=function* () {
    yield 1;
    yield 2;
    yield 3;
};
for(let value of obj){
    console.log(value);
}

用Generator写抽奖

let draw=function (count) {
    //具体抽奖逻辑
    console.info(`剩余${count}抽奖次数`);
};
let residue=function* (count) {
    while(count>0){
        count--;
        yield draw(count);
    }
};
let star=residue(5);
let btn=document.createElement('button');
btn.innerHTML='点击抽奖';
document.body.appendChild(btn);
btn.onclick=function () {
    star.next();
}

前端定时的去接收服务端的变化

• 两种办法：1）websocket-兼容性不好 ； 2)常轮询-看如下代码

let ajax=function* () {
    yield new Promise((resolve,reject)=>{
        setTimeout(function () {
            resolve({code:0})
        },200)
    })
};
let pull=function () {
    let generator=ajax();
    let step=generator.next();
    //拿回后台的数据
    step.value.then(function (d) {
        if(d.code!=0){
            setTimeout(function () {
                console.info('wait');
                pull();
            },1000)
        }else{
            console.log(d);
        }
    })
};
pull();