ES6 的循環和可迭代對象

時間 2021-02-14

標籤 javascript 前端 java node 程序員 es6 面試 segmentfault 數組 bash 欄目 JavaScript 简体版

原文原文鏈接

做者：Alan Storm
翻譯：瘋狂的技術宅javascript

原文：https://alanstorm.com/es6s-ma...前端

未經容許嚴禁轉載java

本文將研究 ES6 的 for ... of 循環。node

舊方法

在過去，有兩種方法能夠遍歷 javascript。程序員

首先是經典的 for i 循環，它使你能夠遍歷數組或可索引的且有 length 屬性的任何對象。es6

for(i=0;i<things.length;i++) {
    var thing = things[i]
    /* ... */
}

其次是 for ... in 循環，用於循環一個對象的鍵/值對。面試

for(key in things) {
    if(!thing.hasOwnProperty(key)) { continue; }
    var thing = things[key]
    /* ... */
}

for ... in 循環一般被視做旁白，由於它循環了對象的每個可枚舉屬性。這包括原型鏈中父對象的屬性，以及被分配爲方法的因此屬性。換句話說，它遍歷了一些人們可能想不到的東西。使用 for ... in 一般意味着循環塊中有不少保護子句，以免出現不須要的屬性。 segmentfault

早期的 javascript 經過庫解決了這個問題。許多 JavaScript庫（例如：Prototype.js，jQuery，lodash 等）都有相似 each 或 foreach 這樣的工具方法或函數，可以讓你無需 for i 或 for ... in 循環去遍歷對象和數組。數組

for ... of 循環是 ES6 試圖不用第三方庫去解決其中一些問題的方式。bash

for … of

for ... of 循環

for(const thing of things) {
    /* ... */
}

它將遍歷一個可迭代（iterable）對象。

可迭代對象是定義了 @@ iterator 方法的對象，並且 @@iterator 方法返回一個實現了迭代器協議的對象，或者該方法是生成器函數。

在這句話中你須要理解不少東西：

可迭代的對象
@@iterator方法（ @@是什麼意思？）
迭代器協議（這裏的協議是什麼意思？）
等等，迭代（iterable）和迭代器（iterator）不是一回事？
另外，生成器函數又是什麼鬼？

下面逐個解決這些疑問。

內置 Iterable

首先，javascript 對象中的一些內置對象自然的能夠迭代，好比最容易想到的就是數組對象。能夠像下面的代碼中同樣在 for ... of 循環中使用數組：

const foo = [
'apples','oranges','pears'
]

for(const thing of foo) {
  console.log(thing)
}

輸出結果是數組中的全部元素。

apples
oranges
pears

還有數組的 entries 方法，它返回一個可迭代對象。這個可迭代對象在每次循環中返回鍵和值。例以下面的代碼：

const foo = [
'apples','oranges','pears'
]

for(const thing of foo.entries()) {
  console.log(thing)
}

將輸出如下內容

[ 0, 'apples' ]
[ 1, 'oranges' ]
[ 2, 'pears' ]

當用下面的語法時，entries 方法會更有用

const foo = [
    'apples','oranges','pears'
]

for(const [key, value] of foo.entries()) {
  console.log(key,':',value)
}

在 for 循環中聲明瞭兩個變量：一個用於返回數組的第一項（值的鍵或索引），另外一個用於第二項（該索引實際對應的值）。

一個普通的 javascript 對象是不可迭代的。若是你執行下面這段代碼：

// 沒法正常執行
const foo = {
  'apples':'oranges',
  'pears':'prunes'
}

for(const [key, value] of foo) {
  console.log(key,':',value)
}

會獲得一個錯誤

$ node test.js
/path/to/test.js:6
for(const [key, value] of foo) {
TypeError: foo is not iterable

然而全局 Object 對象的靜態 entries 方法接受一個普通對象做爲參數，並返回一個可迭代對象。就像這樣的程序：

const foo = {
  'apples':'oranges',
  'pears':'prunes'
}

for(const [key, value] of Object.entries(foo)) {
  console.log(key,':',value)
}

可以獲得你指望的輸出：

$ node test.js
apples : oranges
pears : prunes

建立本身的 Iterable

若是你想建立本身的可迭代對象，則須要花費更多的時間。你會記得前面說過：

可迭代對象是定義了 @@ iterator 方法的對象，並且 @@iterator 方法返回一個實現了 迭代器協議的對象，或者該方法是生成器函數。

搞懂這些內容的最簡單方法就是一步一步的去建立可迭代對象。首先，咱們須要一個實現 @@iterator 方法的對象。 @@ 表示法有點誤導性，咱們真正要作的是用預約義的 Symbol.iterator 符號定義方法。

若是用迭代器方法定義對象並嘗試遍歷：

const foo = {
  [Symbol.iterator]: function() {
  }
}

for(const [key, value] of foo) {
  console.log(key, value)
}

獲得一個新錯誤：

for(const [key, value] of foo) {
                          ^
TypeError: Result of the Symbol.iterator method is not an object

這是 javascript 告訴咱們它在試圖調用 Symbol.iterator 方法，可是調用的結果不是對象。

爲了消除這個錯誤，須要用迭代器方法來返回實現了迭代器協議的對象。這意味着迭代器方法須要返回一個有 next 鍵的對象，而 next 鍵是一個函數。

const foo = {
  [Symbol.iterator]: function() {
    return {
      next: function() {
      }
    }
  }
}

for(const [key, value] of foo) {
  console.log(key, value)
}

若是運行上面的代碼，則會出現新錯誤。

for(const [key, value] of foo) {
                     ^
TypeError: Iterator result undefined is not an object

此次 javascript 告訴咱們它試圖調用 Symbol.iterator 方法，而該對象的確是一個對象，而且實現了 next 方法，可是 next 的返回值不是 javascript 預期的對象。

next 函數須要返回有特定格式的對象——有 value 和 done 這兩個鍵。

next: function() {
    //...
    return {
        done: false,
        value: 'next value'
    }
}

done 鍵是可選的。若是值爲 true（表示迭代器已完成迭代），則說明迭代已結束。

若是 done 爲 false 或不存在，則須要 value 鍵。 value 鍵是經過循環此應該返回的值。

因此在代碼中放入另外一個程序，它帶有一個簡單的迭代器，該迭代器返回前十個偶數。

class First20Evens {
  constructor() {
    this.currentValue = 0
  }

  [Symbol.iterator]() {
    return {
      next: (function() {
        this.currentValue+=2
        if(this.currentValue > 20) {
          return {done:true}
        }
        return {
          value:this.currentValue
        }
      }).bind(this)
    }
  }
}

const foo = new First20Evens;
for(const value of foo) {
  console.log(value)
}

生成器

手動去構建實現迭代器協議的對象不是惟一的選擇。生成器對象（由生成器函數返回）也實現了迭代器協議。上面的例子用生成器構建的話看起來像這樣：

class First20Evens {
  constructor() {
    this.currentValue = 0
  }

  [Symbol.iterator]() {
    return function*() {
      for(let i=1;i<=10;i++) {
        if(i % 2 === 0) {
          yield i
        }
      }
    }()
  }
}

const foo = new First20Evens;
for(const item of foo) {
  console.log(item)
}

本文不會過多地介紹生成器，若是你須要入門的話能夠看這篇文章。今天的重要收穫是，咱們可使本身的 Symbol.iterator 方法返回一個生成器對象，而且該生成器對象可以在 for ... of 循環中「正常工做」。「正常工做」是指循環可以持續的在生成器上調用 next，直到生成器中止 yield 值爲止。