摘要：我們將從概念上理解迭代器是什么，以及在何處使用它們和示例。同時(shí)返回一個(gè)名為迭代器的對(duì)象，這個(gè)迭代器將擁有一個(gè)名為的方法，該方法將返回一個(gè)具有鍵值為和的對(duì)象。下圖可以幫助建立可迭代對(duì)象迭代器和之間的關(guān)系，這種關(guān)系稱為迭代協(xié)議。

我們將在本文中分析迭代器。迭代器是在JavaScript中循環(huán)任何集合的一種新方法。它們是在ES6中引入的，由于它們的廣泛用途和在不同地方的使用而變得非常流行。

我們將從概念上理解迭代器是什么，以及在何處使用它們和示例。我們還將看到它在JavaScript中的一些實(shí)現(xiàn)。如果我問(wèn)你，你會(huì)怎么做?你會(huì)說(shuō)——很簡(jiǎn)單。我將使用 for、while、for-of 或 其它 方法對(duì)它們進(jìn)行循環(huán)。

想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你！

假設(shè)你有這個(gè)數(shù)組

const myFavouriteAuthors = [
  "Neal Stephenson",
  "Arthur Clarke",
  "Isaac Asimov", 
  "Robert Heinlein"
];

在某些情況下，希望返回?cái)?shù)組中的所有多帶帶值，以便在屏幕上打印它們、操作它們或?qū)λ鼈儓?zhí)行某些操作。

如下：

現(xiàn)在，假設(shè)你擁有一個(gè)自定義數(shù)據(jù)結(jié)構(gòu)來(lái)保存所有作者，而不是上面的數(shù)組，如：

mypreferteauthors 是一個(gè)對(duì)象，它包含另一個(gè)對(duì)象 allAuthors。allAuthors 包含三個(gè)數(shù)組，其中包含 fiction、scienceFiction 和 fantasy。

現(xiàn)在，如果要求你循環(huán)遍歷 myFavouriteAuthors 以獲得所有的作者，你的方法是什么? 你可能會(huì)嘗試一些循環(huán)組合來(lái)獲得所有數(shù)據(jù)。

但是，如果你這樣做了 ——

for (let author of myFavouriteAuthors) { 
  console.log(author)
}
// TypeError: {} is not iterable

你將得到一個(gè)類型錯(cuò)誤，說(shuō)明該對(duì)象不可迭代。讓我們看看什么是可迭代的，以及如何使對(duì)象可迭代。

在本文的最后，你將了解如何在定制對(duì)象上使用for-of循環(huán)，在本例中是在 mypreferteauthors 上使用 for-of 循環(huán)。

在上一節(jié)中看到了問(wèn)題,從我們的自定義對(duì)象中獲取所有的作者是不容易的。我們需要某種方法，通過(guò)它我們可以有序地獲取內(nèi)部數(shù)據(jù)。

我們?cè)?mypreferteauthors 中添加一個(gè)返回所有作者的方法 getAllAuthors。如：

這是一個(gè)簡(jiǎn)單的方法。它幫我們完成了獲取所有作者的功能。但是，這種實(shí)現(xiàn)可能會(huì)出現(xiàn)一些問(wèn)題：

getAllAuthors 的名稱非常具體。如果其他人正在創(chuàng)建自己的 mypreferteauthors，他們可能會(huì)將其命名為retrieveAllAuthors。

作為開發(fā)人員，我們總是需要知道返回所有數(shù)據(jù)的特定方法，在本例中，它被命名為getAllAuthors。

getAllAuthors 返回的是字符串?dāng)?shù)組，如果另一個(gè)開發(fā)人員以這種格式返回一個(gè)對(duì)象數(shù)組，該怎么辦：

[ {name: "Agatha Christie"}, {name: "J. K. Rowling"}, ... ]

開發(fā)人員必須知道返回所有數(shù)據(jù)的方法的確切名稱和返回類型。

如果我們規(guī)定方法的名稱和它的返回類型是固定不變的呢?

讓我們將這個(gè)方法命名為 --- iteratorMethod

ECMA 也采取了類似的步驟來(lái)標(biāo)準(zhǔn)化在定制對(duì)象上循環(huán)的過(guò)程。但是，ECMA沒(méi)有使用名稱 iteratorMethod，而是使用名稱 Symbol.iterator。Symbols 提供的名稱是唯一的，不能與其他屬性名稱沖突。同時(shí),Symbol.iterator 返回一個(gè)名為迭代器的對(duì)象，這個(gè)迭代器將擁有一個(gè)名為next的方法，該方法將返回一個(gè)具有鍵值為 value 和 done 的對(duì)象。

值鍵 value 包含當(dāng)前值，它可以是任何類型的，done 是布爾值，它表示是否獲取了所有的值。

下圖可以幫助建立可迭代對(duì)象、迭代器和next之間的關(guān)系，這種關(guān)系稱為迭代協(xié)議。

根據(jù)Axel Rauschmayer博士的《探索JS》一書：

可迭代是一種數(shù)據(jù)結(jié)構(gòu)，它希望使其元素對(duì)外部可訪問(wèn)，通過(guò)實(shí)現(xiàn)一個(gè)關(guān)鍵字是Symbol.iterator的方法來(lái)實(shí)現(xiàn)，該方法是迭代器的工廠，也就是說(shuō)，它將創(chuàng)建迭代器。

迭代器是一個(gè)指針，用于遍歷數(shù)據(jù)結(jié)構(gòu)的元素，我們將使用computed property語(yǔ)法來(lái)設(shè)置這個(gè)鍵，如下：

因此，正如我們?cè)谏弦还?jié)學(xué)到的，我們需要實(shí)現(xiàn)一個(gè)名為Symbol.iterator的方法

在第4行，我們創(chuàng)建迭代器。它是一個(gè)定義了next方法的對(duì)象。next方法根據(jù)step變量返回值。在第25行，我們檢索iterator，27行，我們調(diào)用next方法，直到 done的值為 true。

這正是for-of循環(huán)中發(fā)生的事情，for-of接受一個(gè)迭代器，并創(chuàng)建它的迭代器,它會(huì)一直調(diào)用next()，直到 done為 true。

JavaScript中的很多對(duì)象都是可迭代的。它們可能不是很好的察覺，但是如果仔細(xì)檢查，就會(huì)發(fā)現(xiàn)迭代的特征：

Arrays and TypedArrays

Strings —— 遍歷每個(gè)字符或Unicode代碼點(diǎn)

Maps —— 遍歷其鍵-值對(duì)

Sets —— 遍歷元素

arguments? —— 函數(shù)中類似數(shù)組的特殊變量

DOM elements (Work in Progress)

JS中使用迭代的其他一些結(jié)構(gòu)是:

for-of -- for-of 循環(huán)需要一個(gè)可迭代的對(duì)象，否則，它將拋出一個(gè)類型錯(cuò)誤。

for (const value of iterable) { ... }

數(shù)組解構(gòu) -- 由于可迭代性，會(huì)發(fā)生析構(gòu)。讓我們來(lái)看看：

const array = ["a", "b", "c", "d", "e"];
const [first, ,third, ,last] = array;

等價(jià)于:

const array = ["a", "b", "c", "d", "e"];
const iterator = array[Symbol.iterator]();
const first = iterator.next().value
iterator.next().value // Since it was skipped, so it"s not assigned
const third = iterator.next().value
iterator.next().value // Since it was skipped, so it"s not assigned
const last = iterator.next().value

擴(kuò)展操作符(…)

const array = ["a", "b", "c", "d", "e"];

const newArray = [1, ...array, 2, 3];

等價(jià)于：

const array = ["a", "b", "c", "d", "e"];
const iterator = array[Symbol.iterator]();
const newArray = [1];
for (let nextValue = iterator.next(); nextValue.done !== true; nextValue = iterator.next()) {
  newArray.push(nextValue.value);
}
newArray.push(2)
newArray.push(3)

Promise.all 和 Promise.race 接受可迭代對(duì)象

Maps 和 Sets

下面是一個(gè)實(shí)現(xiàn)，它使mypreferteauthors具有可迭代性：

const myFavouriteAuthors = {
  allAuthors: {
    fiction: [
      "Agatha Christie", 
      "J. K. Rowling",
      "Dr. Seuss"
    ],
    scienceFiction: [
      "Neal Stephenson",
      "Arthur Clarke",
      "Isaac Asimov", 
      "Robert Heinlein"
    ],
    fantasy: [
      "J. R. R. Tolkien",
      "J. K. Rowling",
      "Terry Pratchett"
    ],
  },
  [Symbol.iterator]() {
    // 獲取數(shù)組中的所有作者
    const genres = Object.values(this.allAuthors);
    
    // 存儲(chǔ)當(dāng)前類型和索引
    let currentAuthorIndex = 0;
    let currentGenreIndex = 0;
    
    return {
      // Implementation of next()
      next() {
        // 根據(jù)當(dāng)前的索引獲取對(duì)應(yīng)的作者信息
        const authors = genres[currentGenreIndex];
        
        // 當(dāng)遍歷完數(shù)組 authors是,oNotHaveMoreAuthors 為 true
        const doNothaveMoreAuthors = !(currentAuthorIndex < authors.length);
        if (doNothaveMoreAuthors) {
         // 加一繼續(xù)訪問(wèn)下一個(gè)
          currentGenreIndex++;
          // 重置
          currentAuthorIndex = 0;
        }
        
        // 如果所有 genres 都遍歷完了結(jié)，那么我們需要告訴迭代器不能提供更多的值。
        const doNotHaveMoreGenres = !(currentGenreIndex < genres.length);
        if (doNotHaveMoreGenres) {
          return {
            value: undefined,
            done: true
          };
        }
        
        // 如果一切正常，從當(dāng)genre 返回 作者和當(dāng)前作者索引，以便下次，下一個(gè)作者可以返回。
        return {
          value: genres[currentGenreIndex][currentAuthorIndex++],
          done: false
        }
      }
    };
  }
};

for (const author of myFavouriteAuthors) {
  console.log(author);
}

console.log(...myFavouriteAuthors)

通過(guò)本文獲得的知識(shí)，你可以很容易地理解迭代器是如何工作的，這種邏輯可能有點(diǎn)難以理解。因此，理解這個(gè)概念的最佳方法是多多敲死代碼，多多驗(yàn)證！

你的點(diǎn)贊是我持續(xù)分享好東西的動(dòng)力，歡迎點(diǎn)贊！