目錄

1. Iterator（遍歷器）的概念

2. 默認(rèn) Iterator 接口

3. 調(diào)用 Iterator 接口的場(chǎng)合

3.1解構(gòu)賦值

3.2擴(kuò)展運(yùn)算符

3.3yield*

3.4其他場(chǎng)合

4. 字符串的 Iterator 接口

5. Iterator 接口與 Generator 函數(shù)?

6. 遍歷器對(duì)象的 return()，throw()

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

7.1數(shù)組

7.2Set 和 Map 結(jié)構(gòu)

?7.3計(jì)算生成的數(shù)據(jù)結(jié)構(gòu)

7.4類似數(shù)組的對(duì)象

7.5對(duì)象

7.6與其他遍歷語(yǔ)法的比較

總結(jié)

“睡服“面試官系列之各系列目錄匯總（建議學(xué)習(xí)收藏）

---

1. Iterator（遍歷器）的概念

JavaScript 原有的表示“集合”的數(shù)據(jù)結(jié)構(gòu)，主要是數(shù)組（ Array ）和對(duì)象（ Object ），ES6 又添加了 Map 和 Set 。這樣就有了四種數(shù)據(jù)集合，用戶還可
以組合使用它們，定義自己的數(shù)據(jù)結(jié)構(gòu)，比如數(shù)組的成員是 Map ， Map 的成員是對(duì)象。這樣就需要一種統(tǒng)一的接口機(jī)制，來(lái)處理所有不同的數(shù)據(jù)結(jié)構(gòu)。
遍歷器（Iterator）就是這樣一種機(jī)制。它是一種接口，為各種不同的數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一的訪問(wèn)機(jī)制。任何數(shù)據(jù)結(jié)構(gòu)只要部署 Iterator 接口，就可以完成
遍歷操作（即依次處理該數(shù)據(jù)結(jié)構(gòu)的所有成員）。
Iterator 的作用有三個(gè)：一是為各種數(shù)據(jù)結(jié)構(gòu)，提供一個(gè)統(tǒng)一的、簡(jiǎn)便的訪問(wèn)接口；二是使得數(shù)據(jù)結(jié)構(gòu)的成員能夠按某種次序排列；三是 ES6 創(chuàng)造了一種
新的遍歷命令 for...of 循環(huán)，Iterator 接口主要供 for...of 消費(fèi)。

Iterator 的遍歷過(guò)程是這樣的。
（1）創(chuàng)建一個(gè)指針對(duì)象，指向當(dāng)前數(shù)據(jù)結(jié)構(gòu)的起始位置。也就是說(shuō)，遍歷器對(duì)象本質(zhì)上，就是一個(gè)指針對(duì)象。
（2）第一次調(diào)用指針對(duì)象的 next 方法，可以將指針指向數(shù)據(jù)結(jié)構(gòu)的第一個(gè)成員。
（3）第二次調(diào)用指針對(duì)象的 next 方法，指針就指向數(shù)據(jù)結(jié)構(gòu)的第二個(gè)成員。
（4）不斷調(diào)用指針對(duì)象的 next 方法，直到它指向數(shù)據(jù)結(jié)構(gòu)的結(jié)束位置。
每一次調(diào)用 next 方法，都會(huì)返回?cái)?shù)據(jù)結(jié)構(gòu)的當(dāng)前成員的信息。具體來(lái)說(shuō)，就是返回一個(gè)包含 value 和 done 兩個(gè)屬性的對(duì)象。其中， value 屬性是當(dāng)前成
員的值， done 屬性是一個(gè)布爾值，表示遍歷是否結(jié)束。
下面是一個(gè)模擬 next 方法返回值的例子。

var it = makeIterator(['a', 'b']); it.next() // { value: "a", done: false } it.next() // { value: "b", done: false } it.next() // { value: undefined, done: true } function makeIterator(array) { var nextIndex = 0; return { next: function() { return nextIndex < array.length ? {value: array[nextIndex++], done: false} : {value: undefined, done: true}; } }; }

上面代碼定義了一個(gè) makeIterator 函數(shù)，它是一個(gè)遍歷器生成函數(shù)，作用就是返回一個(gè)遍歷器對(duì)象。對(duì)數(shù)組 ['a', 'b'] 執(zhí)行這個(gè)函數(shù)，就會(huì)返回該數(shù)組
的遍歷器對(duì)象（即指針對(duì)象） it 。
指針對(duì)象的 next 方法，用來(lái)移動(dòng)指針。開(kāi)始時(shí)，指針指向數(shù)組的開(kāi)始位置。然后，每次調(diào)用 next 方法，指針就會(huì)指向數(shù)組的下一個(gè)成員。第一次調(diào)用，
指向 a ；第二次調(diào)用，指向 b 。
next 方法返回一個(gè)對(duì)象，表示當(dāng)前數(shù)據(jù)成員的信息。這個(gè)對(duì)象具有 value 和 done 兩個(gè)屬性， value 屬性返回當(dāng)前位置的成員， done 屬性是一個(gè)布爾值，
表示遍歷是否結(jié)束，即是否還有必要再一次調(diào)用 next 方法。
總之，調(diào)用指針對(duì)象的 next 方法，就可以遍歷事先給定的數(shù)據(jù)結(jié)構(gòu)。
對(duì)于遍歷器對(duì)象來(lái)說(shuō)， done: false 和 value: undefined 屬性都是可以省略的，因此上面的 makeIterator 函數(shù)可以簡(jiǎn)寫(xiě)成下面的形式。

function makeIterator(array) { var nextIndex = 0; return { next: function() { return nextIndex < array.length ? {value: array[nextIndex++]} : {done: true}; } }; }

由于 Iterator 只是把接口規(guī)格加到數(shù)據(jù)結(jié)構(gòu)之上，所以，遍歷器與它所遍歷的那個(gè)數(shù)據(jù)結(jié)構(gòu)，實(shí)際上是分開(kāi)的，完全可以寫(xiě)出沒(méi)有對(duì)應(yīng)數(shù)據(jù)結(jié)構(gòu)的遍歷器
對(duì)象，或者說(shuō)用遍歷器對(duì)象模擬出數(shù)據(jù)結(jié)構(gòu)。下面是一個(gè)無(wú)限運(yùn)行的遍歷器對(duì)象的例子

var it = idMaker(); it.next().value // '0' it.next().value // '1' it.next().value // '2' // ... function idMaker() { var index = 0; return { next: function() { return {value: index++, done: false}; } }; }

上面的例子中，遍歷器生成函數(shù) idMaker ，返回一個(gè)遍歷器對(duì)象（即指針對(duì)象）。但是并沒(méi)有對(duì)應(yīng)的數(shù)據(jù)結(jié)構(gòu)，或者說(shuō)，遍歷器對(duì)象自己描述了一個(gè)數(shù)據(jù)
結(jié)構(gòu)出來(lái)。

如果使用 TypeScript 的寫(xiě)法，遍歷器接口（Iterable）、指針對(duì)象（Iterator）和 next 方法返回值的規(guī)格可以描述如下

interface Iterable { [Symbol.iterator]() : Iterator, } interface Iterator { next(value?: any) : IterationResult, } interface IterationResult { value: any, done: boolean, }

2. 默認(rèn) Iterator 接口

Iterator 接口的目的，就是為所有數(shù)據(jù)結(jié)構(gòu)，提供了一種統(tǒng)一的訪問(wèn)機(jī)制，即 for...of 循環(huán)（詳見(jiàn)下文）。當(dāng)使用 for...of 循環(huán)遍歷某種數(shù)據(jù)結(jié)構(gòu)時(shí)，
該循環(huán)會(huì)自動(dòng)去尋找 Iterator 接口。
一種數(shù)據(jù)結(jié)構(gòu)只要部署了 Iterator 接口，我們就稱這種數(shù)據(jù)結(jié)構(gòu)是”可遍歷的“（iterable）。
ES6 規(guī)定，默認(rèn)的 Iterator 接口部署在數(shù)據(jù)結(jié)構(gòu)的 Symbol.iterator 屬性，或者說(shuō)，一個(gè)數(shù)據(jù)結(jié)構(gòu)只要具有 Symbol.iterator 屬性，就可以認(rèn)為是“可遍
歷的”（iterable）。 Symbol.iterator 屬性本身是一個(gè)函數(shù)，就是當(dāng)前數(shù)據(jù)結(jié)構(gòu)默認(rèn)的遍歷器生成函數(shù)。執(zhí)行這個(gè)函數(shù)，就會(huì)返回一個(gè)遍歷器。至于屬性
名 Symbol.iterator ，它是一個(gè)表達(dá)式，返回 Symbol 對(duì)象的 iterator 屬性，這是一個(gè)預(yù)定義好的、類型為 Symbol 的特殊值，所以要放在方括號(hào)內(nèi)

const obj = { [Symbol.iterator] : function () { return { next: function () { return { value: 1, done: true }; } }; } };

上面代碼中，對(duì)象 obj 是可遍歷的（iterable），因?yàn)榫哂?Symbol.iterator 屬性。執(zhí)行這個(gè)屬性，會(huì)返回一個(gè)遍歷器對(duì)象。該對(duì)象的根本特征就是具有
next 方法。每次調(diào)用 next 方法，都會(huì)返回一個(gè)代表當(dāng)前成員的信息對(duì)象，具有 value 和 done 兩個(gè)屬性。
ES6 的有些數(shù)據(jù)結(jié)構(gòu)原生具備 Iterator 接口（比如數(shù)組），即不用任何處理，就可以被 for...of 循環(huán)遍歷。原因在于，這些數(shù)據(jù)結(jié)構(gòu)原生部署了
Symbol.iterator 屬性，另外一些數(shù)據(jù)結(jié)構(gòu)沒(méi)有（比如對(duì)象）。凡是部署了 Symbol.iterator 屬性的數(shù)據(jù)結(jié)構(gòu)，就稱為部署了遍歷器接口。
調(diào)用這個(gè)接口，就會(huì)返回一個(gè)遍歷器對(duì)象。
原生具備 Iterator 接口的數(shù)據(jù)結(jié)構(gòu)如下

Array
Map
Set
String
TypedArray
函數(shù)的 arguments 對(duì)象
NodeList 對(duì)象
下面的例子是數(shù)組的 Symbol.iterator 屬性

let arr = ['a', 'b', 'c']; let iter = arr[Symbol.iterator](); iter.next() // { value: 'a', done: false } iter.next() // { value: 'b', done: false } iter.next() // { value: 'c', done: false } iter.next() // { value: undefined, done: true }

上面代碼中，變量 arr 是一個(gè)數(shù)組，原生就具有遍歷器接口，部署在 arr 的 Symbol.iterator 屬性上面。所以，調(diào)用這個(gè)屬性，就得到遍歷器對(duì)象。
對(duì)于原生部署 Iterator 接口的數(shù)據(jù)結(jié)構(gòu)，不用自己寫(xiě)遍歷器生成函數(shù)， for...of 循環(huán)會(huì)自動(dòng)遍歷它們。除此之外，其他數(shù)據(jù)結(jié)構(gòu)（主要是對(duì)象）的
Iterator 接口，都需要自己在 Symbol.iterator 屬性上面部署，這樣才會(huì)被 for...of 循環(huán)遍歷。

對(duì)象（Object）之所以沒(méi)有默認(rèn)部署 Iterator 接口，是因?yàn)閷?duì)象的哪個(gè)屬性先遍歷，哪個(gè)屬性后遍歷是不確定的，需要開(kāi)發(fā)者手動(dòng)指定。本質(zhì)上，遍歷器
是一種線性處理，對(duì)于任何非線性的數(shù)據(jù)結(jié)構(gòu)，部署遍歷器接口，就等于部署一種線性轉(zhuǎn)換。不過(guò)，嚴(yán)格地說(shuō)，對(duì)象部署遍歷器接口并不是很必要，因?yàn)?br /> 這時(shí)對(duì)象實(shí)際上被當(dāng)作 Map 結(jié)構(gòu)使用，ES5 沒(méi)有 Map 結(jié)構(gòu)，而 ES6 原生提供了。
一個(gè)對(duì)象如果要具備可被 for...of 循環(huán)調(diào)用的 Iterator 接口，就必須在 Symbol.iterator 的屬性上部署遍歷器生成方法（原型鏈上的對(duì)象具有該方法也
可）。

class RangeIterator { constructor(start, stop) { this.value = start; this.stop = stop; } [Symbol.iterator]() { return this; } next() { var value = this.value; if (value < this.stop) { this.value++; return {done: false, value: value}; } return {done: true, value: undefined}; } } function range(start, stop) { return new RangeIterator(start, stop); } for (var value of range(0, 3)) { console.log(value); // 0, 1, 2 }

上面代碼是一個(gè)類部署 Iterator 接口的寫(xiě)法。 Symbol.iterator 屬性對(duì)應(yīng)一個(gè)函數(shù)，執(zhí)行后返回當(dāng)前對(duì)象的遍歷器對(duì)象。
下面是通過(guò)遍歷器實(shí)現(xiàn)指針結(jié)構(gòu)的例子。

function Obj(value) { this.value = value; this.next = null; } Obj.prototype[Symbol.iterator] = function() { var iterator = { next: next }; var current = this; function next() { if (current) { var value = current.value; current = current.next; return { done: false, value: value }; } else { return { done: true }; } } return iterator; } var one = new Obj(1); var two = new Obj(2); var three = new Obj(3); one.next = two; two.next = three; for (var i of one){ console.log(i); // 1, 2, 3 }

上面代碼首先在構(gòu)造函數(shù)的原型鏈上部署 Symbol.iterator 方法，調(diào)用該方法會(huì)返回遍歷器對(duì)象 iterator ，調(diào)用該對(duì)象的 next 方法，在返回一個(gè)值的同
時(shí)，自動(dòng)將內(nèi)部指針移到下一個(gè)實(shí)例。
下面是另一個(gè)為對(duì)象添加 Iterator 接口的例子

let obj = { data: [ 'hello', 'world' ], [Symbol.iterator]() { const self = this; let index = 0; return { next() { if (index < self.data.length) { return { value: self.data[index++], done: false }; } else { return { value: undefined, done: true }; } } }; } };

對(duì)于類似數(shù)組的對(duì)象（存在數(shù)值鍵名和 length 屬性），部署 Iterator 接口，有一個(gè)簡(jiǎn)便方法，就是 Symbol.iterator 方法直接引用數(shù)組的 Iterator 接
口。

NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator]; // 或者 NodeList.prototype[Symbol.iterator] = [][Symbol.iterator]; [...document.querySelectorAll('div')] // 可以執(zhí)行了

NodeList 對(duì)象是類似數(shù)組的對(duì)象，本來(lái)就具有遍歷接口，可以直接遍歷。上面代碼中，我們將它的遍歷接口改成數(shù)組的 Symbol.iterator 屬性，可以看到
沒(méi)有任何影響。
下面是另一個(gè)類似數(shù)組的對(duì)象調(diào)用數(shù)組的 Symbol.iterator 方法的例子

let iterable = { 0: 'a', 1: 'b', 2: 'c', length: 3, [Symbol.iterator]: Array.prototype[Symbol.iterator] }; for (let item of iterable) { console.log(item); // 'a', 'b', 'c' }

注意，普通對(duì)象部署數(shù)組的 Symbol.iterator 方法，并無(wú)效果

let iterable = { a: 'a', b: 'b', c: 'c', length: 3, [Symbol.iterator]: Array.prototype[Symbol.iterator] }; for (let item of iterable) { console.log(item); // undefined, undefined, undefined

如果 Symbol.iterator 方法對(duì)應(yīng)的不是遍歷器生成函數(shù)（即會(huì)返回一個(gè)遍歷器對(duì)象），解釋引擎將會(huì)報(bào)錯(cuò)。

var obj = {}; obj[Symbol.iterator] = () => 1; [...obj] // TypeError: [] is not a functio

上面代碼中，變量 obj 的 Symbol.iterator 方法對(duì)應(yīng)的不是遍歷器生成函數(shù)，因此報(bào)錯(cuò)。
有了遍歷器接口，數(shù)據(jù)結(jié)構(gòu)就可以用 for...of 循環(huán)遍歷（詳見(jiàn)下文），也可以使用 while 循環(huán)遍歷。

var $iterator = ITERABLE[Symbol.iterator](); var $result = $iterator.next(); while (!$result.done) { var x = $result.value; // ... $result = $iterator.next(); }

上面代碼中， ITERABLE 代表某種可遍歷的數(shù)據(jù)結(jié)構(gòu)， $iterator 是它的遍歷器對(duì)象。遍歷器對(duì)象每次移動(dòng)指針（ next 方法），都檢查一下返回值的 done
屬性，如果遍歷還沒(méi)結(jié)束，就移動(dòng)遍歷器對(duì)象的指針到下一步（ next 方法），不斷循環(huán)。

3. 調(diào)用 Iterator 接口的場(chǎng)合

有一些場(chǎng)合會(huì)默認(rèn)調(diào)用 Iterator 接口（即 Symbol.iterator 方法），除了下文會(huì)介紹的 for...of 循環(huán)，還有幾個(gè)別的場(chǎng)合

3.1解構(gòu)賦值

對(duì)數(shù)組和 Set 結(jié)構(gòu)進(jìn)行解構(gòu)賦值時(shí)，會(huì)默認(rèn)調(diào)用 Symbol.iterator 方法

let set = new Set().add('a').add('b').add('c'); let [x,y] = set; // x='a'; y='b' let [first, ...rest] = set; // first='a'; rest=['b','c'];

3.2擴(kuò)展運(yùn)算符

擴(kuò)展運(yùn)算符（...）也會(huì)調(diào)用默認(rèn)的 Iterator 接口

// 例一 var str = 'hello'; [...str] // ['h','e','l','l','o'] // 例二 let arr = ['b', 'c']; ['a', ...arr, 'd'] // ['a', 'b', 'c', 'd']

上面代碼的擴(kuò)展運(yùn)算符內(nèi)部就調(diào)用 Iterator 接口。
實(shí)際上，這提供了一種簡(jiǎn)便機(jī)制，可以將任何部署了 Iterator 接口的數(shù)據(jù)結(jié)構(gòu)，轉(zhuǎn)為數(shù)組。也就是說(shuō)，只要某個(gè)數(shù)據(jù)結(jié)構(gòu)部署了 Iterator 接口，就可以
對(duì)它使用擴(kuò)展運(yùn)算符，將其轉(zhuǎn)為數(shù)組

let arr = [...iterable];

3.3yield*

yield* 后面跟的是一個(gè)可遍歷的結(jié)構(gòu)，它會(huì)調(diào)用該結(jié)構(gòu)的遍歷器接口

let generator = function* () { yield 1; yield* [2,3,4]; yield 5; }; var iterator = generator(); iterator.next() // { value: 1, done: false } iterator.next() // { value: 2, done: false } iterator.next() // { value: 3, done: false } iterator.next() // { value: 4, done: false } iterator.next() // { value: 5, done: false } iterator.next() // { value: undefined, done: true }

3.4其他場(chǎng)合

由于數(shù)組的遍歷會(huì)調(diào)用遍歷器接口，所以任何接受數(shù)組作為參數(shù)的場(chǎng)合，其實(shí)都調(diào)用了遍歷器接口。下面是一些例子。

for...of
Array.from()
Map(), Set(), WeakMap(), WeakSet()（比如 new Map([['a',1],['b',2]]) ）
Promise.all()
Promise.race()

4. 字符串的 Iterator 接口

字符串是一個(gè)類似數(shù)組的對(duì)象，也原生具有 Iterator 接口

var someString = "hi"; typeof someString[Symbol.iterator] // "function" var iterator = someString[Symbol.iterator](); iterator.next() // { value: "h", done: false } iterator.next() // { value: "i", done: false } iterator.next() // { value: undefined, done: true }

上面代碼中，調(diào)用 Symbol.iterator 方法返回一個(gè)遍歷器對(duì)象，在這個(gè)遍歷器上可以調(diào)用 next 方法，實(shí)現(xiàn)對(duì)于字符串的遍歷。
可以覆蓋原生的 Symbol.iterator 方法，達(dá)到修改遍歷器行為的目的

var str = new String("hi"); [...str] // ["h", "i"] str[Symbol.iterator] = function() { return { next: function() { if (this._first) { this._first = false; return { value: "bye", done: false }; } else { return { done: true }; } }, _first: true }; }; [...str] // ["bye"] str // "hi"

上面代碼中，字符串 str 的 Symbol.iterator 方法被修改了，所以擴(kuò)展運(yùn)算符（ ... ）返回的值變成了 bye ，而字符串本身還是 hi

5. Iterator 接口與 Generator 函數(shù)?

Symbol.iterator 方法的最簡(jiǎn)單實(shí)現(xiàn)

var myIterable = {}; myIterable[Symbol.iterator] = function* () { yield 1; yield 2; yield 3; }; [...myIterable] // [1, 2, 3] // 或者采用下面的簡(jiǎn)潔寫(xiě)法 let obj = { * [Symbol.iterator]() { yield 'hello'; yield 'world'; } }; for (let x of obj) { console.log(x); } // hello // world

上面代碼中， Symbol.iterator 方法幾乎不用部署任何代碼，只要用 yield 命令給出每一步的返回值即可

6. 遍歷器對(duì)象的 return()，throw()

遍歷器對(duì)象除了具有 next 方法，還可以具有 return 方法和 throw 方法。如果你自己寫(xiě)遍歷器對(duì)象生成函數(shù)，那么 next 方法是必須部署的， return 方法
和 throw 方法是否部署是可選的。
return 方法的使用場(chǎng)合是，如果 for...of 循環(huán)提前退出（通常是因?yàn)槌鲥e(cuò)，或者有 break 語(yǔ)句或 continue 語(yǔ)句），就會(huì)調(diào)用 return 方法。如果一個(gè)對(duì)
象在完成遍歷前，需要清理或釋放資源，就可以部署 return 方法

function readLinesSync(file) { return { next() { return { done: false }; }, return() { file.close(); return { done: true }; }, }; }

上面代碼中，函數(shù) readLinesSync 接受一個(gè)文件對(duì)象作為參數(shù)，返回一個(gè)遍歷器對(duì)象，其中除了 next 方法，還部署了 return 方法。下面的三種情況，都
會(huì)觸發(fā)執(zhí)行 return 方法。

// 情況一 for (let line of readLinesSync(fileName)) { console.log(line); break; } // 情況二 for (let line of readLinesSync(fileName)) { console.log(line); continue; } // 情況三 for (let line of readLinesSync(fileName)) { console.log(line); throw new Error(); }

上面代碼中，情況一輸出文件的第一行以后，就會(huì)執(zhí)行 return 方法，關(guān)閉這個(gè)文件；情況二輸出所有行以后，執(zhí)行 return 方法，關(guān)閉該文件；情況三會(huì)
在執(zhí)行 return 方法關(guān)閉文件之后，再拋出錯(cuò)誤。
注意， return 方法必須返回一個(gè)對(duì)象，這是 Generator 規(guī)格決定的。
throw 方法主要是配合 Generator 函數(shù)使用，一般的遍歷器對(duì)象用不到這個(gè)方法

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

ES6 借鑒 C++、Java、C# 和 Python 語(yǔ)言，引入了 for...of 循環(huán)，作為遍歷所有數(shù)據(jù)結(jié)構(gòu)的統(tǒng)一的方法。
一個(gè)數(shù)據(jù)結(jié)構(gòu)只要部署了 Symbol.iterator 屬性，就被視為具有 iterator 接口，就可以用 for...of 循環(huán)遍歷它的成員。也就是說(shuō)， for...of 循環(huán)內(nèi)部調(diào)
用的是數(shù)據(jù)結(jié)構(gòu)的 Symbol.iterator 方法。
for...of 循環(huán)可以使用的范圍包括數(shù)組、Set 和 Map 結(jié)構(gòu)、某些類似數(shù)組的對(duì)象（比如 arguments 對(duì)象、DOM NodeList 對(duì)象）、后文的 Generator
對(duì)象，以及字符串。

7.1數(shù)組

數(shù)組原生具備 iterator 接口（即默認(rèn)部署了 Symbol.iterator 屬性）， for...of 循環(huán)本質(zhì)上就是調(diào)用這個(gè)接口產(chǎn)生的遍歷器，可以用下面的代碼證明。

const arr = ['red', 'green', 'blue']; for(let v of arr) { console.log(v); // red green blue } const obj = {}; obj[Symbol.iterator] = arr[Symbol.iterator].bind(arr); for(let v of obj) { console.log(v); // red green blue }

上面代碼中，空對(duì)象 obj 部署了數(shù)組 arr 的 Symbol.iterator 屬性，結(jié)果 obj 的 for...of 循環(huán)，產(chǎn)生了與 arr 完全一樣的結(jié)果。
for...of 循環(huán)可以代替數(shù)組實(shí)例的 forEach 方法

const arr = ['red', 'green', 'blue']; arr.forEach(function (element, index) { console.log(element); // red green blue console.log(index); // 0 1 2 });

JavaScript 原有的 for...in 循環(huán)，只能獲得對(duì)象的鍵名，不能直接獲取鍵值。ES6 提供 for...of 循環(huán)，允許遍歷獲得鍵值

var arr = ['a', 'b', 'c', 'd']; for (let a in arr) { console.log(a); // 0 1 2 3 } for (let a of arr) { console.log(a); // a b c d }

上面代碼表明， for...in 循環(huán)讀取鍵名， for...of 循環(huán)讀取鍵值。如果要通過(guò) for...of 循環(huán)，獲取數(shù)組的索引，可以借助數(shù)組實(shí)例的 entries 方法和
keys 方法
for...of 循環(huán)調(diào)用遍歷器接口，數(shù)組的遍歷器接口只返回具有數(shù)字索引的屬性。這一點(diǎn)跟 for...in 循環(huán)也不一樣

let arr = [3, 5, 7]; arr.foo = 'hello'; for (let i in arr) { console.log(i); // "0", "1", "2", "foo" } for (let i of arr) { console.log(i); // "3", "5", "7" } 上面代碼中， for...of 循環(huán)不會(huì)返回?cái)?shù)組 arr 的 foo 屬性。

7.2Set 和 Map 結(jié)構(gòu)

Set 和 Map 結(jié)構(gòu)也原生具有 Iterator 接口，可以直接使用 for...of 循環(huán)。

var engines = new Set(["Gecko", "Trident", "Webkit", "Webkit"]); for (var e of engines) { console.log(e); } // Gecko // Trident // Webkit var es6 = new Map(); es6.set("edition", 6); es6.set("committee", "TC39"); es6.set("standard", "ECMA-262"); for (var [name, value] of es6) { console.log(name + ": " + value); } // edition: 6 // committee: TC39 // standard: ECMA-262

上面代碼演示了如何遍歷 Set 結(jié)構(gòu)和 Map 結(jié)構(gòu)。值得注意的地方有兩個(gè)，首先，遍歷的順序是按照各個(gè)成員被添加進(jìn)數(shù)據(jù)結(jié)構(gòu)的順序。其次，Set 結(jié)構(gòu)
遍歷時(shí)，返回的是一個(gè)值，而 Map 結(jié)構(gòu)遍歷時(shí)，返回的是一個(gè)數(shù)組，該數(shù)組的兩個(gè)成員分別為當(dāng)前 Map 成員的鍵名和鍵值。

let map = new Map().set('a', 1).set('b', 2); for (let pair of map) { console.log(pair); } // ['a', 1] // ['b', 2] for (let [key, value] of map) { console.log(key + ' : ' + value); } // a : 1 // b : 2

?7.3計(jì)算生成的數(shù)據(jù)結(jié)構(gòu)

有些數(shù)據(jù)結(jié)構(gòu)是在現(xiàn)有數(shù)據(jù)結(jié)構(gòu)的基礎(chǔ)上，計(jì)算生成的。比如，ES6 的數(shù)組、Set、Map 都部署了以下三個(gè)方法，調(diào)用后都返回遍歷器對(duì)象。
entries() 返回一個(gè)遍歷器對(duì)象，用來(lái)遍歷 [鍵名, 鍵值] 組成的數(shù)組。對(duì)于數(shù)組，鍵名就是索引值；對(duì)于 Set，鍵名與鍵值相同。Map 結(jié)構(gòu)的
Iterator 接口，默認(rèn)就是調(diào)用 entries 方法。
keys() 返回一個(gè)遍歷器對(duì)象，用來(lái)遍歷所有的鍵名。
values() 返回一個(gè)遍歷器對(duì)象，用來(lái)遍歷所有的鍵值。
這三個(gè)方法調(diào)用后生成的遍歷器對(duì)象，所遍歷的都是計(jì)算生成的數(shù)據(jù)結(jié)構(gòu)。

let arr = ['a', 'b', 'c']; for (let pair of arr.entries()) { console.log(pair); } // [0, 'a'] // [1, 'b'] // [2, 'c']

7.4類似數(shù)組的對(duì)象

類似數(shù)組的對(duì)象包括好幾類。下面是 for...of 循環(huán)用于字符串、DOM NodeList 對(duì)象、 arguments 對(duì)象的例子。

// 字符串 let str = "hello"; for (let s of str) { console.log(s); // h e l l o } // DOM NodeList對(duì)象 let paras = document.querySelectorAll("p"); for (let p of paras) { p.classList.add("test"); } // arguments對(duì)象 function printArgs() { for (let x of arguments) { console.log(x); } } printArgs('a', 'b'); // 'a' // 'b'

對(duì)于字符串來(lái)說(shuō)， for...of 循環(huán)還有一個(gè)特點(diǎn)，就是會(huì)正確識(shí)別 32 位 UTF-16 字符。

for (let x of 'a\uD83D\uDC0A') { console.log(x); } // 'a' // '\uD83D\uDC0A'

并不是所有類似數(shù)組的對(duì)象都具有 Iterator 接口，一個(gè)簡(jiǎn)便的解決方法，就是使用 Array.from 方法將其轉(zhuǎn)為數(shù)組。

let arrayLike = { length: 2, 0: 'a', 1: 'b' }; // 報(bào)錯(cuò) for (let x of arrayLike) { console.log(x); } // 正確 for (let x of Array.from(arrayLike)) { console.log(x); }

7.5對(duì)象

對(duì)于普通的對(duì)象， for...of 結(jié)構(gòu)不能直接使用，會(huì)報(bào)錯(cuò)，必須部署了 Iterator 接口后才能使用。但是，這樣情況下， for...in 循環(huán)依然可以用來(lái)遍歷鍵
名

let es6 = { edition: 6, committee: "TC39", standard: "ECMA-262" }; for (let e in es6) { console.log(e); } // edition // committee // standard for (let e of es6) { console.log(e); } // TypeError: es6[Symbol.iterator] is not a function

上面代碼表示，對(duì)于普通的對(duì)象， for...in 循環(huán)可以遍歷鍵名， for...of 循環(huán)會(huì)報(bào)錯(cuò)。
一種解決方法是，使用 Object.keys 方法將對(duì)象的鍵名生成一個(gè)數(shù)組，然后遍歷這個(gè)數(shù)組

for (var key of Object.keys(someObject)) { console.log(key + ': ' + someObject[key]); }

。另一個(gè)方法是使用 Generator 函數(shù)將對(duì)象重新包裝一下。

function* entries(obj) { for (let key of Object.keys(obj)) { yield [key, obj[key]]; } } for (let [key, value] of entries(obj)) { console.log(key, '->', value); } // a -> 1 // b -> 2 // c -> 3

7.6與其他遍歷語(yǔ)法的比較

以數(shù)組為例，JavaScript 提供多種遍歷語(yǔ)法。最原始的寫(xiě)法就是 for 循環(huán)

for (var index = 0; index < myArray.length; index++) { console.log(myArray[index]); }

這種寫(xiě)法比較麻煩，因此數(shù)組提供內(nèi)置的 forEach 方法

myArray.forEach(function (value) { console.log(value); });

這種寫(xiě)法的問(wèn)題在于，無(wú)法中途跳出 forEach 循環(huán)， break 命令或 return 命令都不能奏效。
for...in 循環(huán)可以遍歷數(shù)組的鍵名。

for (var index in myArray) { console.log(myArray[index]); }

for...in 循環(huán)有幾個(gè)缺點(diǎn)。
數(shù)組的鍵名是數(shù)字，但是 for...in 循環(huán)是以字符串作為鍵名“0”、“1”、“2”等等。
for...in 循環(huán)不僅遍歷數(shù)字鍵名，還會(huì)遍歷手動(dòng)添加的其他鍵，甚至包括原型鏈上的鍵。
某些情況下， for...in 循環(huán)會(huì)以任意順序遍歷鍵名。

總之， for...in 循環(huán)主要是為遍歷對(duì)象而設(shè)計(jì)的，不適用于遍歷數(shù)組。
for...of 循環(huán)相比上面幾種做法，有一些顯著的優(yōu)點(diǎn)。

for (let value of myArray) { console.log(value); }

有著同 for...in 一樣的簡(jiǎn)潔語(yǔ)法，但是沒(méi)有 for...in 那些缺點(diǎn)。
不同于 forEach 方法，它可以與 break 、 continue 和 return 配合使用。
提供了遍歷所有數(shù)據(jù)結(jié)構(gòu)的統(tǒng)一操作接口。
下面是一個(gè)使用 break 語(yǔ)句，跳出 for...of 循環(huán)的例子

for (var n of fibonacci) { if (n > 1000) break; console.log(n); }

上面的例子，會(huì)輸出斐波納契數(shù)列小于等于 1000 的項(xiàng)。如果當(dāng)前項(xiàng)大于 1000，就會(huì)使用 break 語(yǔ)句跳出 for...of 循環(huán)

總結(jié)

本博客源于本人閱讀相關(guān)書(shū)籍和視頻總結(jié)，創(chuàng)作不易，謝謝點(diǎn)贊支持。學(xué)到就是賺到。我是歌謠，勵(lì)志成為一名優(yōu)秀的技術(shù)革新人員。

歡迎私信交流，一起學(xué)習(xí)，一起成長(zhǎng)。

推薦鏈接 其他文件目錄參照

“睡服“面試官系列之各系列目錄匯總（建議學(xué)習(xí)收藏）

總結(jié)

以上是生活随笔為你收集整理的“睡服”面试官系列第八篇之iterator（建议收藏学习）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。