ES6學習筆記（三）

【轉】 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);    // 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對象。