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)」用途使用。