1. 程式人生 > >ES6 - Generator

ES6 - Generator

Generator函式是ES6引入的新型函式,用於非同步程式設計,是Promise的更高階用法,跟Promise物件聯合使用的話會極大降低非同步程式設計的編寫難度和閱讀難度。

Generator 函式,它與我們常見的函式有很多共同點,但還可以看到下面幾個差異
1、通常的函式以 function 開始,但 Generator 函式以function* 開始。

2、在 Generator 函式內部,yield 是一個關鍵字,和 return 有點像。不同點在於,所有函式(包括 Generator 函式)都只能返回一次,而在 Generator 函式中可以 yield 任意次yield 表示式暫停了 Generator 函式的執行,然後可以從暫停的地方恢復執行

3、yield和yield* 只能在Generator 函式內部使用,一般的函式內使用會報錯。

4、在Generator函式呼叫另一個Generator函式時候,要用yield*
等價於,在yield*位置,展開另一個Generator函式的狀態。

常見的函式不能暫停執行,而 Generator 函式可以,這就是這兩者最大的區別。

基本使用方式:
在這裡插入圖片描述
呼叫Generator函式,函式並不執行,而是返回一個遍歷器物件。必須呼叫遍歷器物件的next方法,將函式執行到下一個yield語句的地方。
當遇到yield語句,就暫停執行,並將yield後邊的表示式的值,作為返回物件的value屬性值。
yield語句如果用在一個表示式之中,必須放在圓括號裡面;
yield語句用作函式引數或放在賦值表示式的右邊,可以不加括號;
return語句,將返回表示式後邊的值,並結束函式。

(Generator 函式也是返回Iterator介面,所以可以使用next()函式訪問)

————————————————————————————————————
注意:如果在編譯 Generator 函式的時候,如果控制檯報regeneratorRuntime is not defined 錯誤,那麼就是babel 並不是完全支援編譯es6。
那麼就需要babel的拓展包(Polyfill)。
這是一個補完babel支援es6的拓展包,配置步驟為3個:
1.開啟命令列鍵入 npm install --save-dev babel-polyfill 安裝polyfill
2.在webpack.config.js中最上面寫上var babelpolyfill = require("babel-polyfill");


3.在自己的專案js檔案中最開頭寫上import "babel-polyfill";