ES6為JavaScript語言帶來了許多新特性。其中兩個特性，生成器和迭代器，極大地改變了我們在更複雜的前端代碼中編寫特定函數的方式。

雖然他們之間的關係很好，但他們實際上做的事情可能有點令人困惑，所以讓我們來看看他們。

迭代器

迭代在編程中是一種常見的做法，通常用於循環一組值，要麼轉換每個值，要麼使用或以某種方式保存它。

在JavaScript中，我們總是有這樣的for循環:

但是ES6給了我們一個選擇：

這可以說是更清潔、更容易使用，並讓我想起了Python和Ruby之類的語言。但是還有一件事對於這種新的迭代非常重要:它允許您直接與數據集的元素交互。

假設我們想知道數組中的每個數是否是質數。我們可以用一個函數來做這個。它可能是這樣的:

不是世界上最好的，但它能起作用。下一步是對我們的數字列表進行循環，並檢查是否每一個都是我們的新函數。這是很簡單的:

它仍然有效，但是它很笨重，而且笨拙很大程度上取決於JavaScript處理循環的方式。但是，使用ES6，我們在新迭代器中得到了一個幾乎是python的選項。所以之前的for循環可以寫成這樣：

這是非常乾淨的，但最顯著的一點是for循環。變數i現在表示的是數組中的實際項目，稱為possiblePrimes。所以我們不再需要用指數來表示。這意味著我們可以調用i，而不是在循環中調用possiblePrimes[i]。

在幕後，這種迭代利用了ES6的Symbol.iterator()方法。這個方法負責描述迭代，當調用時，返回一個JavaScript對象，該對象包含循環中的下一個值，以及一個已完成的鍵，這取決於循環是否完成，這要麼是正確的，要麼是錯誤的。

生成器

生成器也稱為「迭代器工廠」，是一種創建特定迭代的新型JavaScript函數。他們給你特殊的自定義方式來循環。

好吧，那是什麼意思？讓我們來看一個例子。假設我們想要一個函數每次調用它時它都會給我們下一個質數。同樣，我們將使用isPrime函數來檢查一個數字是否為質數:

如果你習慣了JavaScript，有些東西看起來有點像巫術，但實際上還不算太糟。我們在關鍵字函數後面有一個奇怪的星號，但是所有這些都是為了告訴JavaScript我們定義了一個生成器。

另一個有趣的部分是yield關鍵字。這就是當你調用生成器時，它會吐出的東西。它大致等價於返回，但它保留了函數的狀態，而不是在調用時重新運行任何東西。它會在運行時「記住」它的位置，所以下次你調用它時，它會繼續它的位置。

這意味著我們可以這樣做:

然後在我們想要得到的時候調用nextPrime——你猜到了——下一個質數:

你也可以直接調用，這在你的發生器不是無限的情況下很有用，因為它返回一個像這樣的對象：nextPrime.next()

在這裡，done鍵告訴您函數是否完成了它的任務。在我們的例子中，我們的函數永遠都不會完成，理論上我們可以把所有質數都加到無窮大(當然，如果我們有這麼多計算機內存的話)。

很酷，我現在可以使用生成器和迭代器嗎？

雖然ECMAScript 2015已經最終確定並且已經有好幾年了，但瀏覽器對其功能特別是發生器的支持還遠遠沒有完成。如果您真的想要使用這些和其他現代功能，您可以查看像Babel和Traceur這樣的轉譯器，它可以將您的ECMAScript 2015代碼轉換為ECMAScript 5代碼（如果可能）。

也有許多在線編輯支持ECMAScript 2015，或者專門關注它，特別是Facebook的Regenerator和JS Bin。如果您只是想找點東西來玩遊戲，想想如何編寫JavaScript，那麼值得一看。

結論

在我們的JavaScript問題方法中，IGenerators和迭代器為我們提供了很多新的靈活性。迭代器允許我們使用Pythonic編寫for循環的方式，這意味著我們的代碼看起來更乾淨，更易於閱讀。

生成器函數使我們能夠編寫函數，記住上次看到它們時的位置，並可以從停止的位置獲取它們。就實際記憶的數量而言，它們也可以是無限的，在某些情況下它們可以非常方便地使用。

支持這些生成器和迭代器是很好的。它們受Node和所有現代瀏覽器支持，但Internet Explorer除外。如果您需要支持舊瀏覽器，最好的辦法就是使用Babel等轉換器。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！