ES6 新玩意兒 - Generator :: 貓桑觀察誌

2014年8月9日星期六

ES6 新玩意兒 - Generator

ㄜ....其實不太能算是新玩意了，畢竟小弟也好一陣子沒有繼續追JS的近況(廢)。
實在是因為前陣子臉書上太多好友在提Kao和CO，當初用的express好像過時了一樣....

「不行！我還沒老啊！」

身為一個技術潮人，臨時抱佛腳是必要的，就從ES6的新規範 - Generator(迭代器) 開始吧。

宣告方式

Generator 的宣告方式比較特別，有點像是 function ，基本上是長這樣：

function * gen(){
    console.log("start!");
    yield "hello";
    yield "I'm Kevin";
    console.log("end!");
}

這個 gen 是一個ㄜ.....函式？總之，使用他後會返回一個 generator，像這樣：

var g = gen(); // g 是一個 Generator

這時，就可以拿它來做這樣的事：

r = g.next(); // "start!"
console.log(r); // { value: "hello", done: false }
r = g.next();
console.log(r); // { value: "I'm Kevin", done: false }
r = g.next(); // "end!"
console.log(r); // { value: undefined, done: true }

Generator.next() 回傳什麼？Value & Done！

value的形式不拘，端看generator的yield後接著什麼，會被放到value中。
至於 done 則是個單純的 boolean，告訴你這個 generator 玩完了沒。

看到這邊，聰明的你應該可以得到一個結論，generator中的yield有點像是中斷點，當 next() 被執行時，generator內的程式碼開始被執行，直到下一個 yield 的那一行。直到 generator的最後一行，回傳 { done: true }。

Generator 也能接收資料

在迭代的過程中，我們也是可以將變數傳入next中的：

function * gen(){
    var got = yield "hello";
    yield got;
}

var g = gen();

g.next("Good morning!"); // "Hello"
g.next(); // "Good morning!"

TADA～～～很好玩吧？

Generator 的特性及用途

因為迭代器中斷函數時，是不會卡死其他程式碼的，這樣的特性非常適合拿來做同步處理。

舉例來說....

舉例來說....

舉例來說....

舉不出來，看看大大們怎麼說好了：

基本上主要是用作「非同步流程控管」及「解決回調地獄(callback hell)」用途使用。

2014年8月9日星期六