ES6学习笔记<三> 生成器函数与yield

为什么要把这个内容拿出来单独做一篇学习笔记？

　　生成器函数比较重要，相对不是很容易理解，单独做一篇笔记详细聊一聊生成器函数。

标题为什么是生成器函数与yield？

　　生成器函数类似其他服务器端语音中的接口（Interface），yield则是生成器函数中表示 返回 或 继续 执行的关键字。

弄清楚这两个概念后，先看一个例子：

    function* fun(val) {
        yield 1*val;
        yield 2*val;
        yield 3*val;
        yield 4*val;
        return 5*val;
    }
    var add = fun(5);　　// 调用函数后不会运行，而是返回指向函数内部状态的指针
    add.next();        // {value: 5, done: false}
    add.next();        // {value: 10, done: false}
    add.next();        // {value: 15, done: false}
    add.next();        // {value: 20, done: false}
    add.next();        // {value: 25, done: true}

生成器函数 yield 描述

根据语法规范，yield 关键字用来暂停和继续执行一个生成器函数。当外部调用生成器的 next() 方法时，yield 关键字右侧的表达式才会执行。

执行结果会转化为一个对象（包含两个属性， value 和 done），作为 next() 方法的返回值。

生成器函数 yield 理解

生成器函数类似服务器端语言的接口（Interface），生成器函数不可直接调用，必须赋值给为变量 或 赋值的变量通过 next() 调用执行 或 destructuring解构。

生成器函数执行过程分解：

首次执行到第一个 yield 返回结果并继续执行后续代码，但不会返回后续yield的值，生成器函数且储存之前变量及运算结果；

下次执行跳过上次 yield 结果返回最近一个 yield 结果... ...

... ... 依次执行直到没有 yield 或 有return为止。

    function* fun(val) {
        console.log("调用生成器函数");
        yield console.log(1*val);
        yield 2*val;
        yield 3*val;
        yield 4*val;
        return 5*val;
    }
    var add = fun(5);
    fun(5);        // 不输出任何结果

        function* fun(){
            var a = 1;
            var b = 2;
            yield a;
            [a, b] = [b, a + b];
            yield a;
            [a, b] = [b, a + b];
            yield a;
            [a, b] = [b, a + b];
            yield a;
            [a, b] = [b, a + b];
        }
        var [no1,no2,no3,no4] = fun();
        console.log(no1);    //
        console.log(no2);    //
        console.log(no3);    //
        console.log(no4);    //

注意 destructuring解构变量不可调用next(); 这个百度没查到为什么 不能调用next()，有大神知道为什么谢谢留言告诉下。

for... of ... 用法

        function* fun(){
            let a = 1,b = 2,c = 3;
            yield a;
            yield b;
            yield c;
        }
        for(let i of fun()){
            console.log(i);    // 1 2 3
            }

for…of循环可以自动遍历Generator函数时生成的Iterator对象。

ES6学习笔记目录

ES6学习笔记<一> let const class extends super

ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring

ES6学习笔记<三> 生成器函数与yield

ES6学习笔记<四> default、rest、Multi-line Strings

ES6学习笔记<五> Module的操作——import、export、as