1. 程式人生 > >對ES6的yield示例分析

對ES6的yield示例分析

近期ES6標準如火如荼的發展,其中主要還是各大瀏覽器的支援,最重要廠商支付寶,微信的支援,使得國內的發展也很迅猛。

這裡主要是對yield關鍵字的,yield實際上可以看作是一種新的中斷機制,大家都知道javascript函式執行是順序的,中途沒有暫停,等待訊息只能通過回撥或者settimeout等延遲檢查來完成。

有些示例說yield和執行緒有關係,不過我在官方示例中沒看出來,好了進入主題,先來看看官方示例。

function *foo(x){
var y=2*(yield(x+1));
var z=yield(y/3);
return (x+y+z);
}

var it=foo(5);
console.log(it.next());
console.log(it.next(12));
console.log(it.next(13));

  //返回值是{value: 6, done: false},{value: 8, done: false},{value: 42, done: true}

第一點:foo需要是*型的,新增的*帶來的是這個函式指標,這個函式必須是*型的,否則的話var it=foo(5),就表示得到函式執行的結果,而指標型的,表示it取得該函式。

第二點:第一個it.next()表示開始執行函式,直到第一個yield停止。返回值是yield(表示式的值),這個時候的返回時是x+1,x是5,結果就是6. 這裡的it.next如果帶引數,則引數會被忽略,因為首次執行沒有引數可再傳遞.

第三點:第二個it.next(12)表示上一個yield的返回結果是12,帶進去也就是var y=2*12; 這個地方必須帶值,因為yield內是表示式(x+1),不是常量,無法自己計算,這裡為什麼不把之前的x預設帶進去計算,只能說目前的機制不是這樣,

應該是考慮到實現的複雜程式,因為這裡的x是一個變數,實際執行中,這個還可能是表示式,甚至還有作用域的問題考慮,這裡計算出的y=2*12=24,一直計算到下一個yield(24/3),結果是8。

第四點:第三個it.next(13)同樣表示上一個yield的返回結果是13,帶進去也就是var z=13;後面已經沒有yield了,就去函式的返回值return 5+24+13,結果等於42,這個時候done的值是true,表示函式結束。

重要的總結下:function需要是指標,記住yield(表示式)執行的結果是上一個執行的值。

這樣yield的關鍵字是不是清晰了?

在實際工作中並不是it.next()一定要到函式最終的return, 例如第一次執行it.next(),取得返回值不符合預期的值,可以直接不執行後期的next了,例如多層校驗。