ES6為JavaScript語(yǔ)言引入了許多新特性。其中兩個(gè)特性，生成器和迭代器，極大地改變了我們?cè)诟鼜?fù)雜的前端代碼中編寫(xiě)特定函數(shù)的方式。

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

關(guān)鍵要點(diǎn)

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

迭代器

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

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

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

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

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

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

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

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ù)檢查每個(gè)數(shù)字是否為素?cái)?shù)。這很簡(jiǎn)單：

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，我們就在新的迭代器中得到了一個(gè)幾乎類(lèi)似Python的選項(xiàng)。因此，前面的for循環(huán)可以這樣編寫(xiě)：

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ù)組中的實(shí)際項(xiàng)。因此，我們不再需要按索引調(diào)用它了。這意味著我們不必在循環(huán)中調(diào)用possiblePrimes[i]，而只需調(diào)用i即可。

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

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

生成器

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

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

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

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

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

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

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

然后，每當(dāng)我們想要獲得——你猜對(duì)了——下一個(gè)素?cái)?shù)時(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()，這在您的生成器不是無(wú)限的情況下很有用，因?yàn)樗祷匾粋€(gè)這樣的對(duì)象：

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ù)永遠(yuǎn)不會(huì)結(jié)束，理論上可以為我們提供所有直到無(wú)窮大的素?cái)?shù)（如果我們有那么多的計(jì)算機(jī)內(nèi)存的話）。

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

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

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

結(jié)論

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

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

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

關(guān)于ECMAScript 2015生成器和迭代器的常見(jiàn)問(wèn)題解答 (FAQ)

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

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

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

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

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

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

如何在ECMAScript 2015中使用生成器進(jìn)行異步編程？

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

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

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

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

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

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

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

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

當(dāng)然，這是ECMAScript 2015中生成器函數(shù)的一個(gè)簡(jiǎn)單示例：

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

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

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

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

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

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

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