這篇文章主要介紹ES6中for … of循環(huán)和可迭代對象怎么用，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)服務(wù)項目包括嘉定網(wǎng)站建設(shè)、嘉定網(wǎng)站制作、嘉定網(wǎng)頁制作以及嘉定網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，嘉定網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到嘉定省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

舊方法

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

首先是經(jīng)典的 for i 循環(huán)，它使你可以遍歷數(shù)組或可索引的且有 length 屬性的任何對象。

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

其次是 for ... in 循環(huán)，用于循環(huán)一個對象的鍵/值對。

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

for ... in 循環(huán)通常被視作旁白，因為它循環(huán)了對象的每一個可枚舉屬性。這包括原型鏈中父對象的屬性，以及被分配為方法的所以屬性。換句話說，它遍歷了一些人們可能想不到的東西。使用 for ... in 通常意味著循環(huán)塊中有很多保護(hù)子句，以避免出現(xiàn)不需要的屬性。

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

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

for … of

for ... of 循環(huán)

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

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

可迭代對象是定義了 @@ iterator 方法的對象，而且 @@iterator 方法返回一個實現(xiàn)了迭代器協(xié)議的對象，或者該方法是生成器函數(shù)。

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

• 可迭代的對象
• @@iterator方法（ @@是什么意思？）
• 迭代器協(xié)議（這里的協(xié)議是什么意思？）
• 等等，迭代（iterable）和迭代器（iterator）不是一回事？
• 另外，生成器函數(shù)又是什么鬼？

下面逐個解決這些疑問。

內(nèi)置 Iterable

首先，javascript 對象中的一些內(nèi)置對象天然的可以迭代，比如最容易想到的就是數(shù)組對象。可以像下面的代碼中一樣在 for ... of 循環(huán)中使用數(shù)組：

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

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

輸出結(jié)果是數(shù)組中的所有元素。

apples
oranges
pears

還有數(shù)組的 entries 方法，它返回一個可迭代對象。這個可迭代對象在每次循環(huán)中返回鍵和值。例如下面的代碼：

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

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

將輸出以下內(nèi)容

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

當(dāng)用下面的語法時，entries 方法會更有用

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

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

在 for 循環(huán)中聲明了兩個變量：一個用于返回數(shù)組的第一項（值的鍵或索引），另一個用于第二項（該索引實際對應(yīng)的值）。

一個普通的 javascript 對象是不可迭代的。如果你執(zhí)行下面這段代碼：

// 無法正常執(zhí)行
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 對象的靜態(tài) entries 方法接受一個普通對象作為參數(shù)，并返回一個可迭代對象。就像這樣的程序：

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

創(chuàng)建自己的 Iterable

如果你想創(chuàng)建自己的可迭代對象，則需要花費(fèi)更多的時間。你會記得前面說過：

可迭代對象是定義了 @@ iterator 方法的對象，而且 @@iterator 方法返回一個實現(xiàn)了迭代器協(xié)議的對象，或者該方法是生成器函數(shù)。

搞懂這些內(nèi)容的最簡單方法就是一步一步的去創(chuàng)建可迭代對象。首先，我們需要一個實現(xiàn) @@iterator 方法的對象。  @@ 表示法有點誤導(dǎo)性，我們真正??要做的是用預(yù)定義的 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 告訴我們它在試圖調(diào)用 Symbol.iterator 方法，但是調(diào)用的結(jié)果不是對象。

為了消除這個錯誤，需要用迭代器方法來返回實現(xiàn)了迭代器協(xié)議的對象。這意味著迭代器方法需要返回一個有 next 鍵的對象，而 next 鍵是一個函數(shù)。

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

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

如果運(yùn)行上面的代碼，則會出現(xiàn)新錯誤。

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

這次 javascript 告訴我們它試圖調(diào)用 Symbol.iterator 方法，而該對象的確是一個對象，并且實現(xiàn)了 next 方法，但是 next 的返回值不是 javascript 預(yù)期的對象。

next 函數(shù)需要返回有特定格式的對象——有 value 和 done 這兩個鍵。

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

done 鍵是可選的。如果值為 true（表示迭代器已完成迭代），則說明迭代已結(jié)束。

如果 done 為 false 或不存在，則需要 value 鍵。 value 鍵是通過循環(huán)此應(yīng)該返回的值。

所以在代碼中放入另一個程序，它帶有一個簡單的迭代器，該迭代器返回前十個偶數(shù)。

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)
}

生成器

手動去構(gòu)建實現(xiàn)迭代器協(xié)議的對象不是唯一的選擇。生成器對象（由生成器函數(shù)返回）也實現(xiàn)了迭代器協(xié)議。上面的例子用生成器構(gòu)建的話看起來像這樣：

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 循環(huán)中“正常工作”。 “正常工作”是指循環(huán)能夠持續(xù)的在生成器上調(diào)用 next，直到生成器停止 yield 值為止。

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

以上是“ES6中for … of循環(huán)和可迭代對象怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章標(biāo)題：ES6中for…of循環(huán)和可迭代對象怎么用
網(wǎng)頁URL：http://chinadenli.net/article22/gdpdcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、網(wǎng)站制作、移動網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計、網(wǎng)站收錄、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)