最近在寫RN相關的東西，其中涉及到了redux-saga ，saga的實現原理就是ES6中的Generator函數，而Generator函數又和迭代器有著密不可分的關系。所以本篇博客先學習總結了iterator相關的東西，然后又介紹了Generator相關的內容，最后介紹了使用Generator進行異步編程。本篇博客所涉及的示例使用TypeScript語言編寫，當然所涉及的特性是基于ES6規范的，使用TS語言不影響來闡述和總結ES6的相關特性。下篇博客準備系統梳理一下saga相關的內容。
一、迭代器
之前再聊迭代器模式時，使用Swift語言自定義過迭代器，在TS中也有迭代器。此處的迭代器與之前所介紹的迭代器是大同小異的。首先我們先來自定義一個迭代器，然后再看一下ES6中的迭代器的使用方式。
1、自定義迭代器
下方定義了一個迭代器函數，函數說明如下：
{ value: undefine, done: true }, 也就意味著迭代器遍歷結束，value是undefined， done為true?！?/li>
自定義完迭代器后，我們就可以對上述代碼進行測試了。
首先創建了一個數組，然后將數組傳給 makeIterator 函數。
而 makeIterator 函數會返回一個含有next方法的迭代器對象。
2、2。ES6中的迭代器
類似于Swift語言的特性，ES6規范中我們可以直接通過一些對象獲取該對象所對應的迭代器，如下所示：
下方示例中使用的數組和上面使用的list是一個，首先我們通過 list[Symbol.iterator]() 的方式獲取了 list對應的迭代器。
(Symbol也是一種數據類型, 該數據類型用來表示獨一無二的對象)該迭代器的使用方式和輸出結果與上述我們自定義的迭代器的使用方式完全一致, 輸出結果與之前的結果也是一致的。
3、使用 for - of 遍歷迭代器
上述方式創建的迭代器我們是使用的while循環來進行遍歷的，除了while循環，我們還可以通過for-of 進行遍歷。
此處的 for - of遍歷方式類似于Swift語言中的 for - in循環，可以依次的自動去除迭代器中的值。
下方就是使用for - of 來循環遍歷創建的迭代器。
從下方示例中我們不難看出直接輸出的是迭代器返回對象的value值。
4、在類中添加迭代器
我們可以在自己的類中添加相關方法，使我們自己的類支持迭代器。下方就創建了一個 RangeIterator 類，該類的作用是可以定義一個范圍，構造器可以接受兩個值，一個是范圍的起始位置另一個是范圍的結束點。下方我們為該范圍類添加了自定義迭代器，具體說明如下：
在該類中添加了一個名為 next 的箭頭函數，在該函數中做的事情與之前我們自定義的next方法差不多，主要是用來獲取下一個值然后返回。
然后又實現一個[Symbole.iterator]函數，用來獲取迭代器對象。最后我們可看到定義的范圍對象可以向迭代器那樣使用for-of進行遍歷。
5、調用迭代器的場景
迭代器的使用場景還是蠻多的，解構賦值、擴展運算符、Generator函數、yield*, 下方會簡單的列舉出來。
(1)、對數組或者集合的解構賦值
在下方代碼片段中首先創建了一個名為 mySet 的集合對象。然后通過循環給集合中添加了一些值。然后通過 解構賦值 的形式，取出了 mySet 中的第一個值和第二個值。此刻的結構賦值會調用集合的迭代器接口，取出第一個值和第二個值，分別賦值給 first 和 second。
第二個紅框中在結構賦值是使用了擴展運算符，該操作符會使 others 接收 firstItem 剩下的值。
(2)、擴展運算符 ...
接下來來看另一個擴展運算符的例子。
首先定義了一個字符串，然后通過擴展運算符將該字符串的每個字符拆分到一個數組中，輸出結果如下所示。擴展運算符還可以使用到對象上，如第二個示例所示。
(3)、在Generator函數的 yield * 中使用
稍后會詳細的介紹 Generator 函數，一個Generator 函數返回的是一個迭代器，我們可以調用該迭代器的 next 方法來執行每一個 yield。在 Generator 函數中，可以使用 yield * 后邊跟一個可便遍歷的結構，這樣我們就可以在外部統一使用 next 來訪問這個可遍歷的結構的每一個值，如下所示：
二、Generator函數及異步編程
理解完迭代器，接下來來看一下Generator函數。如果做過RN開發的話，如果使用過 redux - saga的話，應該對Generator函數不陌生。Generator函數是ES6提供的異步編程的解決方案，解析了我們先看一下Generator函數基本使用方式，再看一下如何使用Generator函數進行異步編程。
1、Generator函數的定義和使用
下方定義了一個 Generator函數，Generator函數的定義與普通函數的定義差不多，只不過是function關鍵字后邊跟了一個*號。然后函數體內部使用了一個個 yield語句來表明每一步的操作。定義完Generator函數后，下方緊接著的是使用，首先調用該Generator函數獲取了一個迭代器，每次執行這個迭代器的next方法都會一次的執行一個yield語句。輸出結果和上面的迭代器沒啥區別。
2、next的參數
在調用Generator函數返回的迭代器時，是可以往next方法中傳入參數的。next 方法可以帶一個參數，該參數被當做上一個 yield 語句的返回值。下方就是給 next 傳參的一個示例：
下方定義了一個Generator函數，用來輸出自增的值，每次調用next都會獲取一個自增的值。當調用 rg.next(true) 時，這個true就會被賦值給 reset, 因為這個reset被視為上個yield的返回值，上一個yield執行后，會將index設置為 -1。那么rg.next(true)對應的 yield執行是，index是從 -1 開始自增的，自增后為0，所以 rg.next(true) 對應的 yield 的值為0。
下方是另一個示例：
下方定義了一個名為testNextValue的Generator函數，該函數本身接收了一個參數。在調用該Generator函數時，傳入了一個參數，這個參數不是Next的參數，是Generator函數本身的參數。
Generator函數在調用時，函數體并不會馬上執行，在調用next函數時才會執行函數中yield語句體。
第一次調用Next，給Next傳入了一個值 5，也就是說明 x = 5。
第一次執行next會調用第一個 yield 語句體，test1.next(2) = x + 1 = 5 + 1 = 6, 所以第一次調用next的結果值為
6。第二次調用 Next，傳入的Next參數為3。
這個3 被作為上一個 yield 語句體的返回值，yield(x + 1) 的返回值為 3。那么 y 的值就為 2 * 3 = 6。yield中的值為 y / 3 = 2，所以第二次執行next獲取的值為 2。第三次調用Next傳入的參數為 4，這個 4 被作為上個yield語句體返回的參數，所以z = 4, 上分析過了 x = 5, y = 6, 所以 x + y + z = 15, 第三次執行next為 15。再次調用Next，因為語句體執行完了，所以獲取到的是undefined。
三、使用Generator函數進行異步編程
接下來實現一個簡單的示例，使用Generator函數結合Promise回調模擬一下異步編程。
首先定義了一個 getPromise函數，該函數接收兩個參數，一個參數表示網絡請求的參數，另一個參數表示請求時間。該函數返回一個 Promise對象，在Promise對象中我們使用了setTimeout來模擬請求的延遲，根據傳入的timeout來決定延遲時間，延遲時間到達后會執行 resolve方法，將相關值回調出來。
然后定義了一個Generator函數，在該函數中通過yield來調用每個函數，下方的Generator函數比較簡單，在此就不做過多贅述了。
然后我們通過for -of 一次執行Generator函數的next方法，進而來執行每個getPromise方法。
下方是具體的執行結果，從執行結果中不難看出，每次獲取的yield值是一個Promise對象，我們可在該Promise對象的then方法中獲取到相關的結果值。從輸出順序中可以看出，會先輸出時間小的那個結果。
總結
以上所述是小編給大家介紹的ES6中的迭代器、Generator函數及Generator函數的異步操作，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
新聞熱點
疑難解答
2、
