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

雖然它們可以很好地協(xié)同工作，但它們實際的功能可能有點令人困惑，所以讓我們來仔細研究一下。

關(guān)鍵要點

• ES6提供了一種更簡潔的for循環(huán)編寫方式，提供了一種更類似Python的方式來直接與數(shù)據(jù)集中的元素交互，使代碼更易於閱讀和編寫。
• ES6中的生成器是記住每次調(diào)用之間狀態(tài)的函數(shù)。它們每次被調(diào)用時都可以生成序列中的下一個值，有效地創(chuàng)建自定義迭代。
• 生成器函數(shù)中的“yield”關(guān)鍵字類似於“return”，但它保持函數(shù)的狀態(tài)，允許它在下一次調(diào)用時從中斷處繼續(xù)執(zhí)行。
• 雖然Node和現(xiàn)代瀏覽器支持ES6特性，但舊版瀏覽器可能需要Babel等轉(zhuǎn)譯器將ES6代碼轉(zhuǎn)換為ECMAScript 5代碼。

迭代器

迭代是編程中常見的做法，通常用於循環(huán)遍歷一組值，轉(zhuǎn)換每個值，或以某種方式使用或保存它以備後用。

在JavaScript中，我們一直都有這樣的for循環(huán)：

for (var i = 0; i < foo.length; i++) {
  // 對i執(zhí)行某些操作
}

但ES6給了我們另一種選擇：

for (const i of foo) {
  // 對i執(zhí)行某些操作
}

這可以說是更簡潔、更容易使用，讓我想起了Python和Ruby等語言。但是，關(guān)於這種新型迭代，還有一點非常重要需要注意：它允許您直接與數(shù)據(jù)集的元素交互。

假設(shè)我們想找出數(shù)組中的每個數(shù)字是否為素數(shù)。我們可以通過創(chuàng)建一個執(zhí)行此操作的函數(shù)來做到這一點。它可能看起來像這樣：

function isPrime(number) {
  if (number <= 1) {
    return false;
  } else if (number === 2) {
    return true;
  }

  for (var i = 2; i < number; i++) {
    if (number % i === 0) {
      return false;
      break;
    }
  }

  return true;
}

不是世界上最好的，但它有效。下一步是循環(huán)遍歷我們的數(shù)字列表，並使用我們閃亮的新函數(shù)檢查每個數(shù)字是否為素數(shù)。這很簡單：

var possiblePrimes = [73, 6, 90, 19, 15];
var confirmedPrimes = [];

for (var i = 0; i < possiblePrimes.length; i++) {
  if (isPrime(possiblePrimes[i])) {
    confirmedPrimes.push(possiblePrimes[i]);
  }
}

// confirmedPrimes現(xiàn)在是[73, 19]

同樣，它有效，但它很笨拙，這種笨拙很大程度上取決於JavaScript處理for循環(huán)的方式。但是，有了ES6，我們就在新的迭代器中得到了一個幾乎類似Python的選項。因此，前面的for循環(huán)可以這樣編寫：

const possiblePrimes = [73, 6, 90, 19, 15];
const confirmedPrimes = [];

for (const i of possiblePrimes){
   if ( isPrime(i) ){
      confirmedPrimes.push(i);
   }
}

// confirmedPrimes現(xiàn)在是[73, 19]

這要乾淨得多，但最引人注目的是for循環(huán)。變量i現(xiàn)在代表名為possiblePrimes的數(shù)組中的實際項。因此，我們不再需要按索引調(diào)用它了。這意味著我們不必在循環(huán)中調(diào)用possiblePrimes[i]，而只需調(diào)用i即可。

在幕後，這種迭代利用了ES6閃亮的新Symbol.iterator()方法。這個方法負責描述迭代，並且在被調(diào)用時，返回一個JavaScript對象，其中包含循環(huán)中的下一個值和一個done鍵，該鍵根據(jù)循環(huán)是否完成而為true或false。

如果您對這種細節(jié)感興趣，您可以閱讀Jake Archibald撰寫的這篇精彩博文《Iterators gonna iterate》。當我們深入探討本文的另一部分：生成器時，它也會讓您很好地了解幕後發(fā)生了什麼。

生成器

生成器（也稱為“迭代器工廠”）是一種新型的JavaScript函數(shù)，用於創(chuàng)建特定的迭代。它們?yōu)槟峁┝颂厥?、自定義的循環(huán)遍歷內(nèi)容的方式。

好的，那麼這一切意味著什麼？讓我們來看一個例子。假設(shè)我們想要一個函數(shù)，每次調(diào)用它時都會給我們下一個素數(shù)：

for (var i = 0; i < foo.length; i++) {
  // 對i執(zhí)行某些操作
}

如果您習(xí)慣使用JavaScript，其中一些內(nèi)容看起來有點像巫術(shù)，但實際上它並不太糟糕。我們在關(guān)鍵字function之後有那個奇怪的星號，但這只是告訴JavaScript我們正在定義一個生成器。

另一個奇怪的部分是yield關(guān)鍵字。這實際上是生成器在您調(diào)用它時吐出的內(nèi)容。它大致相當於return，但它保留了函數(shù)的狀態(tài)，而不是在每次調(diào)用它時都重新運行所有內(nèi)容。它在運行時“記住”它的位置，因此下次您調(diào)用它時，它會從中斷處繼續(xù)執(zhí)行。

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

for (const i of foo) {
  // 對i執(zhí)行某些操作
}

然後，每當我們想要獲得——你猜對了——下一個素數(shù)時，都可以調(diào)用nextPrime：

function isPrime(number) {
  if (number <= 1) {
    return false;
  } else if (number === 2) {
    return true;
  }

  for (var i = 2; i < number; i++) {
    if (number % i === 0) {
      return false;
      break;
    }
  }

  return true;
}

您也可以只調(diào)用nextPrime.next()，這在您的生成器不是無限的情況下很有用，因為它返回一個這樣的對象：

var possiblePrimes = [73, 6, 90, 19, 15];
var confirmedPrimes = [];

for (var i = 0; i < possiblePrimes.length; i++) {
  if (isPrime(possiblePrimes[i])) {
    confirmedPrimes.push(possiblePrimes[i]);
  }
}

// confirmedPrimes現(xiàn)在是[73, 19]

在這裡，done鍵告訴您函數(shù)是否已完成其任務(wù)。在我們的例子中，我們的函數(shù)永遠不會結(jié)束，理論上可以為我們提供所有直到無窮大的素數(shù)（如果我們有那麼多的計算機內(nèi)存的話）。

很酷，那麼我現(xiàn)在可以使用生成器和迭代器了嗎？

儘管ECMAScript 2015已經(jīng)完成，並且已經(jīng)存在多年了，但其特性（特別是生成器）的瀏覽器支持遠未完善。如果您真的想使用這些和其他現(xiàn)代特性，您可以查看Babel和Traceur等轉(zhuǎn)譯器，它們會將您的ECMAScript 2015代碼轉(zhuǎn)換為等效的（如果可能）ECMAScript 5代碼。

還有許多在線編輯器支持ECMAScript 2015，或者專門關(guān)注它，特別是Facebook的Regenerator和JS Bin。如果您只是想玩玩並了解JavaScript現(xiàn)在如何編寫，那麼這些值得一看。

結(jié)論

生成器和迭代器為我們處理JavaScript問題的方法提供了相當多的新靈活性。迭代器允許我們以更類似Python的方式編寫for循環(huán)，這意味著我們的代碼看起來更簡潔，更容易閱讀。

生成器函數(shù)使我們能夠編寫記住上次看到它們的位置的函數(shù)，並且可以從中斷處繼續(xù)執(zhí)行。它們在實際記住的內(nèi)容方面也可以是無限的，這在某些情況下非常方便。

對這些生成器和迭代器的支持很好。它們在Node和所有現(xiàn)代瀏覽器中都受支持，Internet Explorer除外。如果您需要支持舊版瀏覽器，最好的辦法是使用Babel等轉(zhuǎn)譯器。

關(guān)於ECMAScript 2015生成器和迭代器的常見問題解答 (FAQ)

ECMAScript 2015中的迭代器和生成器有什麼區(qū)別？

迭代器和生成器都是ECMAScript 2015的特性，用於處理數(shù)據(jù)流。迭代器是一個對象，允許程序員遍歷集合中的所有元素。它有一個next()方法，返回序列中的下一個項目。另一方面，生成器是一個可以中途停止然後從停止處繼續(xù)的函數(shù)。換句話說，生成器看起來像一個函數(shù)，但它的行為像一個迭代器。

如何在ECMAScript 2015中使用yield關(guān)鍵字？

yield關(guān)鍵字用於ECMAScript 2015暫停和恢復(fù)生成器函數(shù)（function*或舊版生成器函數(shù)）。 yield可以從生成器函數(shù)返回一個值。這個返回值通常是一個具有兩個屬性的對象：value和done。 value屬性是計算yield表達式的結(jié)果，done是一個布爾值，指示生成器是否已生成其最後一個值。

ECMAScript 2015中next()方法的目的是什麼？

next()方法是ECMAScript 2015中迭代器協(xié)議的關(guān)鍵部分。它返回一個具有兩個屬性的對象：value和done。 value屬性是迭代序列中的下一個值，done是一個布爾值，指示迭代是否完成。如果done為true，則迭代器已超出迭代序列的末尾。

如何在ECMAScript 2015中使用生成器進行異步編程？

ECMAScript 2015中的生成器可用於簡化異步編程。它們可用於阻止執(zhí)行以等待異步操作完成，而不會阻塞整個程序。這可以使異步代碼看起來和行為更像同步代碼，這更容易理解和推理。

ECMAScript 2015中for…of循環(huán)和for…in循環(huán)有什麼區(qū)別？

ECMAScript 2015中的for…of循環(huán)用於循環(huán)遍歷可迭代對象，例如數(shù)組、字符串、映射、集合等等。它使用語句調(diào)用自定義迭代鉤子，這些語句將為每個不同屬性的值執(zhí)行。另一方面，for…in循環(huán)用於循環(huán)遍歷對象的屬性。它返回正在迭代的對象的鍵列表。

如何在ECMAScript 2015中創(chuàng)建自定義迭代器？

在ECMAScript 2015中，您可以通過定義一個具有next()方法的對象來創(chuàng)建自定義迭代器。此方法應(yīng)返回一個具有兩個屬性的對象：value和done。 value屬性是迭代序列中的下一個值，done是一個布爾值，指示迭代是否完成。

Symbol.iterator在ECMAScript 2015中的作用是什麼？

Symbol.iterator是ECMAScript 2015中一個特殊的內(nèi)置符號。它用於指定對象的默認迭代器。當需要迭代一個對象時（例如在for…of循環(huán)的開頭），它的@@iterator方法將不帶任何參數(shù)被調(diào)用，並且返回的迭代器將用於獲取要迭代的值。

你能提供ECMAScript 2015中生成器函數(shù)的示例嗎？

當然，這是ECMAScript 2015中生成器函數(shù)的一個簡單示例：

for (var i = 0; i < foo.length; i++) {
  // 對i執(zhí)行某些操作
}

在這個例子中，idMaker函數(shù)是一個生成器，它產(chǎn)生一個數(shù)字序列。

如何在ECMAScript 2015中使用throw()方法和生成器？

ECMAScript 2015中的throw()方法可用於生成器，以恢復(fù)生成器函數(shù)的執(zhí)行並從yield表達式拋出錯誤。 throw()方法可用於處理生成器函數(shù)執(zhí)行期間發(fā)生的錯誤。

done屬性在ECMAScript 2015迭代器中的意義是什麼？

done屬性是一個布爾值，由ECMAScript 2015中的迭代器返回。它指示迭代器是否還有更多值要返回。如果done為true，則迭代器已超出迭代序列的末尾。如果done為false，則迭代器仍然可以生成更多值。

以上是ES6發(fā)電機和迭代器：開發(fā)人員指南的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！