Generator函式的語法 ES6重刷17

關於generator函式，說實話還是不徹底的明白其意義以及相應的某些應用場景，在此只是針對目前個人境界理解程度，對其進行一次重新的記錄。

一、基本概念

關於generator函式，我就利用es6此書上的比喻來形容。

generator它是乙個狀態機，其內部封裝了很多很多待處理的狀態（yiled code...【待處理狀態之一】），它有三個功能鍵，分別是.next()【開始處理下乙個待處理狀態】、.return()【直接return結束整個狀態處理操作】、.throw()【丟擲異常】。

對於generator函式執行.next()方法時，會返回乙個有著value和done兩個屬性的物件。value屬性表示當前的內部狀態的值，是yield表示式後面那個表示式的值；done屬性是乙個布林值，表示是否遍歷結束【false未遍歷完畢，true已遍歷完畢】。

注意：generator返回的是個遍歷器對物件iterator，而不是建構函式，所以不可直接通過new來建立所對應的generator例項來。

二、yield表示式

1、它本身只是個暫停標識關鍵字，所以單獨得yiled會返回undefined，若其後存在暫緩操作code，則其返回值為其後code的返回值。

2、yield只適用於generator函式，簡單來說，只能在generator函式中使用，其他使用場景報錯。

3、在generator函式中，當其他表示式需要使用yield時，必須將其和其後的表示式用圓括號包起來比如：console.log('hello' + (yield 123))，不然報錯。

三、與iterator介面的關係

1、構造物件自定義iterator介面，因為上述基本概念得知，generator函式返回的是乙個iterator遍歷器物件，所以我們可以將其與symbol.iterator配合從而構造物件自定義iterator介面（遍歷器）。比如：

const obj =
newproxy(,
)// 布置自定義iterator介面
reflect.
set(obj, symbol.iterator,
function*(
)})console.
log(
[...obj]
)// ["first", "second", "暫無資料"]

四、generator與for…of迴圈

首先我們都知道for...of是部署有iterator介面的資料結構專屬特性，那麼為什麼for...of只是針對存在iterator介面的資料結構體有作用呢？

首先得要說明一點，for...of針對的不是部署有iterator介面的資料結構，而是iterator介面本身，也就是遍歷器物件。證明如下：

const
test
=function*(
)for
(const item of
test()
)

那為什麼沒有列印 4 呢？

首先我們得了解，當我們使用for...of時，它會自動尋找例項中的遍歷器物件，從而自動遍歷例項物件，而不需要.next()一步一步手動執行。

ok，這是了解for...of迴圈的前提，現在我麼來說說它是以什麼來判斷遍歷的結束。我們得知道每個遍歷器物件.next()返回值是什麼？

const
test
=function*(
)const test =
test()
console.
log(test.
next()
)// 
console.
log(test.
next()
)// 
console.
log(test.
next()
)// `在這裡插入**片`
console.
log(test.
next()
)//

我們可以知道唯獨沒有被for..of遍歷出的 4 的相應的.next()返回值中的done是true，ok，那我們就可以得知.next()方法返回的是乙個包含yield尾部語句返回值和乙個識別符號done，而done的作用則是表明例項物件是否遍歷完畢，當done為true時表示遍歷完畢並且不會向for...of返回其value值。

五、generator三大api方法【在這裡只說說.next()的乙個注意事項】

1、.next()

首先不用多說它的作用了吧，待會顯得我囉嗦，哈哈哈。

注意點：.next()函式的引數是上乙個yield後語句的返回值，若下乙個yield依賴上乙個yield就需要將值作為引數傳給.next()函式。

const
test
=function*(
)const test =
test()
console.
log(test.
next()
)// 
console.
log(test.
next()
)// 
console.
log(test.
next()
)// 
console.
log(test.
next()
)//

這是不加引數的結果，因為當第二個yield依賴第乙個yield的結果，但是第二個.next()執行時，並不知道firstyield是個什麼東西，所以返回結果為，下面類似道理。

const
test
=function*(
)const test =
test()
console.
log(test.
next()
)// 
console.
log(test.
next(1
))// console.
log(test.
next(2
))// console.
log(test.
next()
)//

這是加了引數的結果。

Generator函式的語法 ES6重刷17

16 1 0 generator函式的語法

Generator函式的語法和應用

迭代函式 Generator函式的理解

Generator函式的語法 ES6重刷17

16 1 0 generator函式的語法

Generator函式的語法和應用

迭代函式 Generator函式的理解

相關推薦