小編給大家分享一下ES6中迭代器、Generator函數(shù)怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)公司！專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、微信小程序開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶(hù)創(chuàng)新互聯(lián)還提供了吳興免費(fèi)建站歡迎大家使用！

一、迭代器

之前再聊迭代器模式時(shí)，使用Swift語(yǔ)言自定義過(guò)迭代器，在TS中也有迭代器。此處的迭代器與之前所介紹的迭代器是大同小異的。首先我們先來(lái)自定義一個(gè)迭代器，然后再看一下ES6中的迭代器的使用方式。

1、自定義迭代器

下方定義了一個(gè)迭代器函數(shù)，函數(shù)說(shuō)明如下：

• 該函數(shù)接收一個(gè)數(shù)組類(lèi)型的參數(shù)，我們可以將需要?jiǎng)?chuàng)建迭代器的數(shù)組作為參數(shù)傳進(jìn)來(lái)。

• 函數(shù)內(nèi)部定義了一個(gè) nextIndex 參數(shù)用來(lái)記錄迭代器的位置。

• 該函數(shù)返回一個(gè)迭代器對(duì)象，該迭代器對(duì)象包含一個(gè)key為 next , value為匿名函數(shù)的屬性。

• 這個(gè)key為 next 的匿名方法的返回值為每次迭代器的返回結(jié)果對(duì)象，這個(gè)結(jié)果對(duì)象由 兩個(gè)屬性組成，value表示本次迭代器的值，done表示迭代器遍歷是否結(jié)束。遍歷到最后，最終返回的值為 { value: undefine, done: true }, 也就意味著迭代器遍歷結(jié)束，value是undefined， done為true?！?/p>

自定義完迭代器后，我們就可以對(duì)上述代碼進(jìn)行測(cè)試了。

首先創(chuàng)建了一個(gè)數(shù)組，然后將數(shù)組傳給 makeIterator 函數(shù)。

而 makeIterator 函數(shù)會(huì)返回一個(gè)含有next方法的迭代器對(duì)象。

• 我們將這個(gè)迭代器對(duì)象命名為 iterator，我們就可以通過(guò) iterator的next方法來(lái)依次獲取數(shù)組中的值了。

• 我們通過(guò) while 循環(huán)來(lái)不斷的調(diào)用 iterator中的next方法，直到next方法返回的對(duì)象中的done值為true時(shí)，表示遍歷結(jié)束。

• 遍歷結(jié)束后，我們?cè)俅握{(diào)用 next() 方法，得到的是{ value: undefind, done: true } 的對(duì)象，表示遍歷結(jié)束，獲取的value值為 undefined。

2、2。ES6中的迭代器

類(lèi)似于Swift語(yǔ)言的特性，ES6規(guī)范中我們可以直接通過(guò)一些對(duì)象獲取該對(duì)象所對(duì)應(yīng)的迭代器，如下所示：

下方示例中使用的數(shù)組和上面使用的list是一個(gè)，首先我們通過(guò) list[Symbol.iterator]() 的方式獲取了 list對(duì)應(yīng)的迭代器。

(Symbol也是一種數(shù)據(jù)類(lèi)型, 該數(shù)據(jù)類(lèi)型用來(lái)表示獨(dú)一無(wú)二的對(duì)象)該迭代器的使用方式和輸出結(jié)果與上述我們自定義的迭代器的使用方式完全一致, 輸出結(jié)果與之前的結(jié)果也是一致的。

3、使用 for - of 遍歷迭代器

上述方式創(chuàng)建的迭代器我們是使用的while循環(huán)來(lái)進(jìn)行遍歷的，除了while循環(huán)，我們還可以通過(guò)for-of 進(jìn)行遍歷。

此處的 for - of遍歷方式類(lèi)似于Swift語(yǔ)言中的 for - in循環(huán)，可以依次的自動(dòng)去除迭代器中的值。

下方就是使用for - of 來(lái)循環(huán)遍歷創(chuàng)建的迭代器。

從下方示例中我們不難看出直接輸出的是迭代器返回對(duì)象的value值。

4、在類(lèi)中添加迭代器

我們可以在自己的類(lèi)中添加相關(guān)方法，使我們自己的類(lèi)支持迭代器。下方就創(chuàng)建了一個(gè) RangeIterator 類(lèi)，該類(lèi)的作用是可以定義一個(gè)范圍，構(gòu)造器可以接受兩個(gè)值，一個(gè)是范圍的起始位置另一個(gè)是范圍的結(jié)束點(diǎn)。下方我們?yōu)樵摲秶?lèi)添加了自定義迭代器，具體說(shuō)明如下：

在該類(lèi)中添加了一個(gè)名為 next 的箭頭函數(shù)，在該函數(shù)中做的事情與之前我們自定義的next方法差不多，主要是用來(lái)獲取下一個(gè)值然后返回。

然后又實(shí)現(xiàn)一個(gè)[Symbole.iterator]函數(shù)，用來(lái)獲取迭代器對(duì)象。最后我們可看到定義的范圍對(duì)象可以向迭代器那樣使用for-of進(jìn)行遍歷。

5、調(diào)用迭代器的場(chǎng)景

迭代器的使用場(chǎng)景還是蠻多的，解構(gòu)賦值、擴(kuò)展運(yùn)算符、Generator函數(shù)、yield*, 下方會(huì)簡(jiǎn)單的列舉出來(lái)。

(1)、對(duì)數(shù)組或者集合的解構(gòu)賦值

在下方代碼片段中首先創(chuàng)建了一個(gè)名為 mySet 的集合對(duì)象。然后通過(guò)循環(huán)給集合中添加了一些值。然后通過(guò) 解構(gòu)賦值 的形式，取出了 mySet 中的第一個(gè)值和第二個(gè)值。此刻的結(jié)構(gòu)賦值會(huì)調(diào)用集合的迭代器接口，取出第一個(gè)值和第二個(gè)值，分別賦值給 first 和 second。

第二個(gè)紅框中在結(jié)構(gòu)賦值是使用了擴(kuò)展運(yùn)算符，該操作符會(huì)使 others 接收 firstItem 剩下的值。

(2)、擴(kuò)展運(yùn)算符 ...　　

接下來(lái)來(lái)看另一個(gè)擴(kuò)展運(yùn)算符的例子。

首先定義了一個(gè)字符串，然后通過(guò)擴(kuò)展運(yùn)算符將該字符串的每個(gè)字符拆分到一個(gè)數(shù)組中，輸出結(jié)果如下所示。擴(kuò)展運(yùn)算符還可以使用到對(duì)象上，如第二個(gè)示例所示。

(3)、在Generator函數(shù)的 yield * 中使用

稍后會(huì)詳細(xì)的介紹 Generator 函數(shù)，一個(gè)Generator 函數(shù)返回的是一個(gè)迭代器，我們可以調(diào)用該迭代器的 next 方法來(lái)執(zhí)行每一個(gè) yield。在 Generator 函數(shù)中，可以使用 yield * 后邊跟一個(gè)可便遍歷的結(jié)構(gòu)，這樣我們就可以在外部統(tǒng)一使用 next 來(lái)訪(fǎng)問(wèn)這個(gè)可遍歷的結(jié)構(gòu)的每一個(gè)值，如下所示：

二、Generator函數(shù)及異步編程

理解完迭代器，接下來(lái)來(lái)看一下Generator函數(shù)。如果做過(guò)RN開(kāi)發(fā)的話(huà)，如果使用過(guò) redux - saga的話(huà)，應(yīng)該對(duì)Generator函數(shù)不陌生。Generator函數(shù)是ES6提供的異步編程的解決方案，解析了我們先看一下Generator函數(shù)基本使用方式，再看一下如何使用Generator函數(shù)進(jìn)行異步編程。

1、Generator函數(shù)的定義和使用

下方定義了一個(gè) Generator函數(shù)，Generator函數(shù)的定義與普通函數(shù)的定義差不多，只不過(guò)是function關(guān)鍵字后邊跟了一個(gè)*號(hào)。然后函數(shù)體內(nèi)部使用了一個(gè)個(gè) yield語(yǔ)句來(lái)表明每一步的操作。定義完Generator函數(shù)后，下方緊接著的是使用，首先調(diào)用該Generator函數(shù)獲取了一個(gè)迭代器，每次執(zhí)行這個(gè)迭代器的next方法都會(huì)一次的執(zhí)行一個(gè)yield語(yǔ)句。輸出結(jié)果和上面的迭代器沒(méi)啥區(qū)別。

2、next的參數(shù)

在調(diào)用Generator函數(shù)返回的迭代器時(shí)，是可以往next方法中傳入?yún)?shù)的。next 方法可以帶一個(gè)參數(shù)，該參數(shù)被當(dāng)做上一個(gè) yield 語(yǔ)句的返回值。下方就是給 next 傳參的一個(gè)示例：

下方定義了一個(gè)Generator函數(shù)，用來(lái)輸出自增的值，每次調(diào)用next都會(huì)獲取一個(gè)自增的值。當(dāng)調(diào)用 rg.next(true) 時(shí)，這個(gè)true就會(huì)被賦值給 reset, 因?yàn)檫@個(gè)reset被視為上個(gè)yield的返回值，上一個(gè)yield執(zhí)行后，會(huì)將index設(shè)置為 -1。那么rg.next(true)對(duì)應(yīng)的 yield執(zhí)行是，index是從 -1 開(kāi)始自增的，自增后為0，所以 rg.next(true) 對(duì)應(yīng)的 yield 的值為0。

下方是另一個(gè)示例：

下方定義了一個(gè)名為testNextValue的Generator函數(shù)，該函數(shù)本身接收了一個(gè)參數(shù)。在調(diào)用該Generator函數(shù)時(shí)，傳入了一個(gè)參數(shù)，這個(gè)參數(shù)不是Next的參數(shù)，是Generator函數(shù)本身的參數(shù)。

Generator函數(shù)在調(diào)用時(shí)，函數(shù)體并不會(huì)馬上執(zhí)行，在調(diào)用next函數(shù)時(shí)才會(huì)執(zhí)行函數(shù)中yield語(yǔ)句體。

第一次調(diào)用Next，給Next傳入了一個(gè)值 5，也就是說(shuō)明 x = 5。

第一次執(zhí)行next會(huì)調(diào)用第一個(gè) yield 語(yǔ)句體，test1.next(2) = x + 1 = 5 + 1 = 6, 所以第一次調(diào)用next的結(jié)果值為

6。第二次調(diào)用 Next，傳入的Next參數(shù)為3。

這個(gè)3 被作為上一個(gè) yield 語(yǔ)句體的返回值，yield(x + 1) 的返回值為 3。那么 y 的值就為 2 * 3 = 6。yield中的值為 y / 3 = 2，所以第二次執(zhí)行next獲取的值為 2。第三次調(diào)用Next傳入的參數(shù)為 4，這個(gè) 4 被作為上個(gè)yield語(yǔ)句體返回的參數(shù)，所以z = 4, 上分析過(guò)了 x = 5, y = 6, 所以 x + y + z = 15, 第三次執(zhí)行next為 15。再次調(diào)用Next，因?yàn)檎Z(yǔ)句體執(zhí)行完了，所以獲取到的是undefined。

三、使用Generator函數(shù)進(jìn)行異步編程

接下來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的示例，使用Generator函數(shù)結(jié)合Promise回調(diào)模擬一下異步編程。

首先定義了一個(gè) getPromise函數(shù)，該函數(shù)接收兩個(gè)參數(shù)，一個(gè)參數(shù)表示網(wǎng)絡(luò)請(qǐng)求的參數(shù)，另一個(gè)參數(shù)表示請(qǐng)求時(shí)間。該函數(shù)返回一個(gè) Promise對(duì)象，在Promise對(duì)象中我們使用了setTimeout來(lái)模擬請(qǐng)求的延遲，根據(jù)傳入的timeout來(lái)決定延遲時(shí)間，延遲時(shí)間到達(dá)后會(huì)執(zhí)行 resolve方法，將相關(guān)值回調(diào)出來(lái)。

然后定義了一個(gè)Generator函數(shù)，在該函數(shù)中通過(guò)yield來(lái)調(diào)用每個(gè)函數(shù)，下方的Generator函數(shù)比較簡(jiǎn)單，在此就不做過(guò)多贅述了。

然后我們通過(guò)for -of 一次執(zhí)行Generator函數(shù)的next方法，進(jìn)而來(lái)執(zhí)行每個(gè)getPromise方法。

　　

下方是具體的執(zhí)行結(jié)果，從執(zhí)行結(jié)果中不難看出，每次獲取的yield值是一個(gè)Promise對(duì)象，我們可在該P(yáng)romise對(duì)象的then方法中獲取到相關(guān)的結(jié)果值。從輸出順序中可以看出，會(huì)先輸出時(shí)間小的那個(gè)結(jié)果。

以上是“ES6中迭代器、Generator函數(shù)怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站標(biāo)題：ES6中迭代器、Generator函數(shù)怎么用-創(chuàng)新互聯(lián)
標(biāo)題來(lái)源：http://jinyejixie.com/article32/dehjsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、靜態(tài)網(wǎng)站、網(wǎng)站導(dǎo)航、小程序開(kāi)發(fā)、企業(yè)網(wǎng)站制作、網(wǎng)站營(yíng)銷(xiāo)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)