首頁  >  文章  >  web前端  >  了解ES6中的for ... of迴圈與Iterable對象

了解ES6中的for ... of迴圈與Iterable對象

青灯夜游
青灯夜游轉載
2020-11-12 18:12:352224瀏覽

了解ES6中的for ... of迴圈與Iterable對象

推薦教學:《JavaScript影片教學

#本文將研究 ES6 的 for ... of 迴圈。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。

舊方法

在過去,有兩種方法可以遍歷 javascript。

首先是經典的 for i 循環,它使你可以遍歷數組或可索引的且有 length 屬性的任何物件。

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 通常表示循環區塊中有很多保護子句,以避免出現不必要的屬性。

早期的 javascript 透過函式庫解決了這個問題。許多JavaScript函式庫(例如:Prototype.js,jQuery,lodash 等)都有類似eachforeach 這樣的工具方法或函數,可讓你不需要for ifor ... in 迴圈去遍歷物件和陣列。

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

for … of

for ... of 迴圈

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

它將遍歷一個 可迭代( iterable)物件。

可迭代對像是定義了@@ iterator 方法的對象,而且@@iterator 方法傳回一個實作了迭代器協定的對象,或該方法是生成器函數。

在這句話中你需要理解很多東西:

  • 可迭代的物件
  • @@iterator方法(@@是什麼意思?)
  • 迭代器協定(這裡的協定是什麼意思?)
  • 等等,迭代(iterable)和迭代器(iterator)不是一回事?
  • 另外,生成器函數又是什麼鬼?

下面逐一解決這些疑問。

內建 Iterable

首先,javascript 物件中的一些內建物件天然的可以迭代,例如最容易想到的就是陣列物件。可以像下面的程式碼中一樣在 for ... of 迴圈中使用陣列:

const foo = [
&#39;apples&#39;,&#39;oranges&#39;,&#39;pears&#39;
]

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

輸出結果是陣列中的所有元素。

apples
oranges
pears

還有數組的 entries 方法,它傳回一個可迭代物件。這個可迭代物件在每次循環中返回鍵和值。例如下面的程式碼:

const foo = [
&#39;apples&#39;,&#39;oranges&#39;,&#39;pears&#39;
]

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

將輸出以下內容

[ 0, &#39;apples&#39; ]
[ 1, &#39;oranges&#39; ]
[ 2, &#39;pears&#39; ]

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

const foo = [
    &#39;apples&#39;,&#39;oranges&#39;,&#39;pears&#39;
]

for(const [key, value] of foo.entries()) {
  console.log(key,&#39;:&#39;,value)
}

在for循環中宣告了兩個變數:一個用於傳回數組的第一項(值的鍵或索引),另一個用於第二項(該索引實際對應的值)。

一個普通的 javascript 物件是不可迭代的。如果你執行下面這段程式碼:

// 无法正常执行
const foo = {
  &#39;apples&#39;:&#39;oranges&#39;,
  &#39;pears&#39;:&#39;prunes&#39;
}

for(const [key, value] of foo) {
  console.log(key,&#39;:&#39;,value)
}

會得到一個錯誤

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

#然而全域Object 物件的靜態entries 方法接受一個普通物件作為參數,並傳回一個可迭代物件。就像這樣的程式:

const foo = {
  &#39;apples&#39;:&#39;oranges&#39;,
  &#39;pears&#39;:&#39;prunes&#39;
}

for(const [key, value] of Object.entries(foo)) {
  console.log(key,&#39;:&#39;,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 函数需要返回有特定格式的对象——有 valuedone 这两个键。

next: function() {
    //...
    return {
        done: false,
        value: &#39;next value&#39;
    }
}

done 键是可选的。如果值为 true(表示迭代器已完成迭代),则说明迭代已结束。

如果 donefalse 或不存在,则需要 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 值为止。

$ node sample-program.js
2
4
6
8
10

原文地址:https://alanstorm.com/es6s-many-for-loops-and-iterable-objects/

作者:Alan Storm

译文地址:https://segmentfault.com/a/1190000023924865

更多编程相关知识,请访问:编程学习网站!!

以上是了解ES6中的for ... of迴圈與Iterable對象的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:segmentfault.com。如有侵權,請聯絡admin@php.cn刪除