学海无涯,回头是岸
不务正业
极简老人

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

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

标题为什么是生成器函数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);    // 1
        console.log(no2);    // 2
        console.log(no3);    // 3
        console.log(no4);    // 5

注意 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

posted on 2017-09-22 22:55  MirageFireFox  阅读(349)  评论(0编辑  收藏  举报