建站
咨詢
售后
建站咨詢
新聞中心
小編給大家分享一下ES6中迭代器、Generator函數(shù)怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
一、迭代器
之前再聊迭代器模式時，使用Swift語言自定義過迭代器，在TS中也有迭代器。此處的迭代器與之前所介紹的迭代器是大同小異的。首先我們先來自定義一個迭代器，然后再看一下ES6中的迭代器的使用方式。
1、自定義迭代器
下方定義了一個迭代器函數(shù)，函數(shù)說明如下：
該函數(shù)接收一個數(shù)組類型的參數(shù)，我們可以將需要創(chuàng)建迭代器的數(shù)組作為參數(shù)傳進(jìn)來。
函數(shù)內(nèi)部定義了一個 nextIndex 參數(shù)用來記錄迭代器的位置。
該函數(shù)返回一個迭代器對象，該迭代器對象包含一個key為 next , value為匿名函數(shù)的屬性。
這個key為 next 的匿名方法的返回值為每次迭代器的返回結(jié)果對象，這個結(jié)果對象由 兩個屬性組成，value表示本次迭代器的值，done表示迭代器遍歷是否結(jié)束。遍歷到最后，最終返回的值為
{ value: undefine, done: true }, 也就意味著迭代器遍歷結(jié)束，value是undefined， done為true?！?/p>
自定義完迭代器后，我們就可以對上述代碼進(jìn)行測試了。
首先創(chuàng)建了一個數(shù)組，然后將數(shù)組傳給 makeIterator 函數(shù)。
而 makeIterator 函數(shù)會返回一個含有next方法的迭代器對象。
我們將這個迭代器對象命名為 iterator，我們就可以通過 iterator的next方法來依次獲取數(shù)組中的值了。
我們通過 while 循環(huán)來不斷的調(diào)用 iterator中的next方法，直到next方法返回的對象中的done值為true時，表示遍歷結(jié)束。
遍歷結(jié)束后，我們再次調(diào)用 next() 方法，得到的是{ value: undefind, done: true } 的對象，表示遍歷結(jié)束，獲取的value值為 undefined。
2、2。ES6中的迭代器
類似于Swift語言的特性，ES6規(guī)范中我們可以直接通過一些對象獲取該對象所對應(yīng)的迭代器，如下所示：
下方示例中使用的數(shù)組和上面使用的list是一個，首先我們通過 list[Symbol.iterator]() 的方式獲取了 list對應(yīng)的迭代器。
(Symbol也是一種數(shù)據(jù)類型, 該數(shù)據(jù)類型用來表示獨一無二的對象)該迭代器的使用方式和輸出結(jié)果與上述我們自定義的迭代器的使用方式完全一致, 輸出結(jié)果與之前的結(jié)果也是一致的。
3、使用 for - of 遍歷迭代器
上述方式創(chuàng)建的迭代器我們是使用的while循環(huán)來進(jìn)行遍歷的，除了while循環(huán)，我們還可以通過for-of 進(jìn)行遍歷。
此處的 for - of遍歷方式類似于Swift語言中的 for - in循環(huán)，可以依次的自動去除迭代器中的值。
下方就是使用for - of 來循環(huán)遍歷創(chuàng)建的迭代器。
從下方示例中我們不難看出直接輸出的是迭代器返回對象的value值。
4、在類中添加迭代器
我們可以在自己的類中添加相關(guān)方法，使我們自己的類支持迭代器。下方就創(chuàng)建了一個 RangeIterator 類，該類的作用是可以定義一個范圍，構(gòu)造器可以接受兩個值，一個是范圍的起始位置另一個是范圍的結(jié)束點。下方我們?yōu)樵摲秶愄砑恿俗远x迭代器，具體說明如下：
在該類中添加了一個名為 next 的箭頭函數(shù)，在該函數(shù)中做的事情與之前我們自定義的next方法差不多，主要是用來獲取下一個值然后返回。
然后又實現(xiàn)一個[Symbole.iterator]函數(shù)，用來獲取迭代器對象。最后我們可看到定義的范圍對象可以向迭代器那樣使用for-of進(jìn)行遍歷。
5、調(diào)用迭代器的場景
迭代器的使用場景還是蠻多的，解構(gòu)賦值、擴(kuò)展運(yùn)算符、Generator函數(shù)、yield*, 下方會簡單的列舉出來。
(1)、對數(shù)組或者集合的解構(gòu)賦值
在下方代碼片段中首先創(chuàng)建了一個名為 mySet 的集合對象。然后通過循環(huán)給集合中添加了一些值。然后通過 解構(gòu)賦值 的形式，取出了 mySet 中的第一個值和第二個值。此刻的結(jié)構(gòu)賦值會調(diào)用集合的迭代器接口，取出第一個值和第二個值，分別賦值給 first 和 second。
第二個紅框中在結(jié)構(gòu)賦值是使用了擴(kuò)展運(yùn)算符，該操作符會使 others 接收 firstItem 剩下的值。
(2)、擴(kuò)展運(yùn)算符 ...
接下來來看另一個擴(kuò)展運(yùn)算符的例子。
首先定義了一個字符串，然后通過擴(kuò)展運(yùn)算符將該字符串的每個字符拆分到一個數(shù)組中，輸出結(jié)果如下所示。擴(kuò)展運(yùn)算符還可以使用到對象上，如第二個示例所示。
(3)、在Generator函數(shù)的 yield * 中使用
稍后會詳細(xì)的介紹 Generator 函數(shù)，一個Generator 函數(shù)返回的是一個迭代器，我們可以調(diào)用該迭代器的 next 方法來執(zhí)行每一個 yield。在 Generator 函數(shù)中，可以使用 yield * 后邊跟一個可便遍歷的結(jié)構(gòu)，這樣我們就可以在外部統(tǒng)一使用 next 來訪問這個可遍歷的結(jié)構(gòu)的每一個值，如下所示：
二、Generator函數(shù)及異步編程
理解完迭代器，接下來來看一下Generator函數(shù)。如果做過RN開發(fā)的話，如果使用過 redux - saga的話，應(yīng)該對Generator函數(shù)不陌生。Generator函數(shù)是ES6提供的異步編程的解決方案，解析了我們先看一下Generator函數(shù)基本使用方式，再看一下如何使用Generator函數(shù)進(jìn)行異步編程。
1、Generator函數(shù)的定義和使用
下方定義了一個 Generator函數(shù)，Generator函數(shù)的定義與普通函數(shù)的定義差不多，只不過是function關(guān)鍵字后邊跟了一個*號。然后函數(shù)體內(nèi)部使用了一個個 yield語句來表明每一步的操作。定義完Generator函數(shù)后，下方緊接著的是使用，首先調(diào)用該Generator函數(shù)獲取了一個迭代器，每次執(zhí)行這個迭代器的next方法都會一次的執(zhí)行一個yield語句。輸出結(jié)果和上面的迭代器沒啥區(qū)別。
2、next的參數(shù)
在調(diào)用Generator函數(shù)返回的迭代器時，是可以往next方法中傳入?yún)?shù)的。next 方法可以帶一個參數(shù)，該參數(shù)被當(dāng)做上一個 yield 語句的返回值。下方就是給 next 傳參的一個示例：
下方定義了一個Generator函數(shù)，用來輸出自增的值，每次調(diào)用next都會獲取一個自增的值。當(dāng)調(diào)用 rg.next(true) 時，這個true就會被賦值給 reset, 因為這個reset被視為上個yield的返回值，上一個yield執(zhí)行后，會將index設(shè)置為 -1。那么rg.next(true)對應(yīng)的 yield執(zhí)行是，index是從 -1 開始自增的，自增后為0，所以 rg.next(true) 對應(yīng)的 yield 的值為0。
下方是另一個示例：
下方定義了一個名為testNextValue的Generator函數(shù)，該函數(shù)本身接收了一個參數(shù)。在調(diào)用該Generator函數(shù)時，傳入了一個參數(shù)，這個參數(shù)不是Next的參數(shù)，是Generator函數(shù)本身的參數(shù)。
Generator函數(shù)在調(diào)用時，函數(shù)體并不會馬上執(zhí)行，在調(diào)用next函數(shù)時才會執(zhí)行函數(shù)中yield語句體。
第一次調(diào)用Next，給Next傳入了一個值 5，也就是說明 x = 5。
第一次執(zhí)行next會調(diào)用第一個 yield 語句體，test1.next(2) = x + 1 = 5 + 1 = 6, 所以第一次調(diào)用next的結(jié)果值為
6。第二次調(diào)用 Next，傳入的Next參數(shù)為3。
這個3 被作為上一個 yield 語句體的返回值，yield(x + 1) 的返回值為 3。那么 y 的值就為 2 * 3 = 6。yield中的值為 y / 3 = 2，所以第二次執(zhí)行next獲取的值為 2。第三次調(diào)用Next傳入的參數(shù)為 4，這個 4 被作為上個yield語句體返回的參數(shù)，所以z = 4, 上分析過了 x = 5, y = 6, 所以 x + y + z = 15, 第三次執(zhí)行next為 15。再次調(diào)用Next，因為語句體執(zhí)行完了，所以獲取到的是undefined。
三、使用Generator函數(shù)進(jìn)行異步編程
接下來實現(xiàn)一個簡單的示例，使用Generator函數(shù)結(jié)合Promise回調(diào)模擬一下異步編程。
首先定義了一個 getPromise函數(shù)，該函數(shù)接收兩個參數(shù)，一個參數(shù)表示網(wǎng)絡(luò)請求的參數(shù)，另一個參數(shù)表示請求時間。該函數(shù)返回一個 Promise對象，在Promise對象中我們使用了setTimeout來模擬請求的延遲，根據(jù)傳入的timeout來決定延遲時間，延遲時間到達(dá)后會執(zhí)行 resolve方法，將相關(guān)值回調(diào)出來。
然后定義了一個Generator函數(shù)，在該函數(shù)中通過yield來調(diào)用每個函數(shù)，下方的Generator函數(shù)比較簡單，在此就不做過多贅述了。
然后我們通過for -of 一次執(zhí)行Generator函數(shù)的next方法，進(jìn)而來執(zhí)行每個getPromise方法。
下方是具體的執(zhí)行結(jié)果，從執(zhí)行結(jié)果中不難看出，每次獲取的yield值是一個Promise對象，我們可在該P(yáng)romise對象的then方法中獲取到相關(guān)的結(jié)果值。從輸出順序中可以看出，會先輸出時間小的那個結(jié)果。
以上是“ES6中迭代器、Generator函數(shù)怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
新聞標(biāo)題：ES6中迭代器、Generator函數(shù)怎么用-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://www.dlmjj.cn/article/dehjsc.html
