本文實例講述了ES6中Generator與異步操作。分享給大家供大家參考,具體如下:
Generator與異步操作
1.Generator概念
可以把Generator理解成一個狀態機(好像React中有很多state),封裝了多個內部狀態。執行Generator返回的是一個遍歷器對象,可以遍歷Generator產生的每一個狀態。在function後加*就可以聲明一個Generator函數。
function* hiGenerator(){ yield 'hi'; yield 'ES5'; return '!'; } var hi = hiGenerator(); console.log(hi); //hiGenerator {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window} console.log(hi.next()); //Object {value: "hi", done: false} console.log(hi.next()); //Object {value: "ES5", done: false} console.log(hi.next()); //Object {value: "!", done: true}
2.yield語句
由於Generator函數返回的遍歷器對象,只有調用next()方法才會遍歷到下一個狀態,所以其實提供了一種可以暫停的執行函數。每次執行next(),遇到yield語句就暫停執行,且將yield後的表達式的值作為返回的對象的value值;如果沒有遇到yield,則返回return語句作為返回對象的value值;如果沒有return,則返回對象的value值為undefined。
3.next方法
next()方法可以帶一個參數,該參數會被當做上一條yield語句的返回值。
function* add(c, d){ var a = 0; a = yield a + c; a = yield a + d; return } var sum = add(1, 2); console.log(sum); //add {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window} console.log(sum.next()); //Object {value: 1, done: false} console.log(sum.next()); //Object {value: NaN, done: false} console.log(sum.next()); //Object {value: undefined, done: true}
如果不給next()傳參,會使得下一步計算無法進行。
function* add(c, d){ var a = 0; a = yield a + c; a = yield a + d + 1; return } var sum = add(1, 2); console.log(sum); //add {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window} console.log(sum.next()); //Object {value: 1, done: false} console.log(sum.next(1)); //Object {value: 4, done: false} console.log(sum.next(3)); //Object {value: undefined, done: true}
4.用for..of...遍歷Generator
用for..of...遍歷Generator時候,不需要顯示調用next()方法。
5.一個Generator函數產生的遍歷器對象g調用return方法後,返回對象的value屬性為return方法的參數。
6.在一個Generator函數內部調用另一個Generator函數。需要使用yield*。
希望本文所述對大家ECMAscript程序設計有所幫助。