導語

遍歷器Iterator是ES6為訪問數據集合提供的統一接口。任何內部部署了遍歷器接口的數據集合，對于用戶來說，都可以使用相同方式獲取到相應的數據結構。如果使用的是最新版Chrome瀏覽器，那么你要知道——我們所熟悉的數組小姐，已悄悄的打開了另一扇可抵達她心扉的小徑。

1 正題

某個數據集合部署了Iterator接口，是指其Symbol.iterator屬性指向一個能返回Iterator接口的函數。任何默認使用遍歷器訪問數據集合的方法，都會調用此屬性以得到遍歷器對象，再按照設定的順序依次訪問該數據結構的成員（關于Symbol.iterator請看最后一節的延伸閱讀）。比如原生數組的遍歷器為[][Symbol.iterator]，也可以直接通過其構造函數的原型獲取Array.prototype[Symbol.iterator]。

1.1 基本行為

調用Iterator接口會返回一個新的遍歷器對象（指針對象）。
對象中必然有next方法，用于訪問下一個數據成員。指針初始時指向當前數據結構的起始位置。

第一次調用對象的next方法，指針指向數據結構的第一個成員。
第二次調用對象的next方法，指針指向數據結構的第二個成員。
不斷的調用對象的next方法，直到它指向數據結構的結束位置。

每次調用next方法，都會返回相同的數據結構：{ value, done }。
其中value表示當前指向成員的值，沒有則為undefined。
其中done是一個布爾值，表示遍歷是否結束，結束為true，否則false。

遍歷器接口的標準十分簡潔，不提供諸如：操作內部指針、判斷是否有值等等方法。只需要一直不斷的調用next方法，當done為false時獲取當時的value，done為true時停止即可。第一次接觸遍歷器的行為模式是在2016的冬天，那時底蘊不夠雞毛也沒長全，理解不了簡潔性的適用和強大。直到現在——在即將打包被迫離開公司的前夕才驀然的醒覺。多么痛的領悟啊。

let iterator = [1, 2, 3][Symbol.iterator]();console.log( iterator.next() ); // {value: 1, done: false} console.log( iterator.next() ); // {value: 2, done: false} console.log( iterator.next() ); // {value: 3, done: false} console.log( iterator.next() ); // {value: undefined, done: true}

1.2 簡單實現

面向不同的數據結構，有不同的遍歷器實現方法，我們簡單的實現下數組的遍歷器方法。

let res = null; let iterator = myIterator([3, 7]);console.log( iterator.next() ); // {value: 3, done: false} console.log( iterator.next() ); // {value: 7, done: false} console.log( iterator.next() ); // {value: undefined, done: true}function myIterator(array = []) {let index = 0;return {next() {return index < array.length ? { value: array[index++], done: false }: { value: undefined, done: true };}}; }

1.3 return & throw

除了為遍歷器對象部署next方法，還可以有return和throw方法。其中return方法會在提前退出for of循環時（通常是因為出錯，或觸發了break語句）被調用。而throw方法主要是配合Generator函數使用，一般的遍歷器對象用不到這個方法，所以不予介紹。

let obj = {[Symbol.iterator]() {let index = 0;let array = [1, 2, 3];return {next() {return index < array.length ? { value: array[index++], done: false }: { value: undefined, done: true };},return() {console.log('Trigger return.');return {};}};} };for (let v of obj) {console.log(v); // 打印出：1, 2, 3，沒觸發 return 函數。 }for (let v of obj) {if (v === 2) break;console.log(v); // 打印出：1，之后觸發 return 函數。 }for (let v of obj) {if (v === 3) break;console.log(v); // 打印出：1, 2，之后觸發 return 函數。 }for (let v of obj) {if (v === 4) break;console.log(v); // 打印出：1, 2, 3，沒觸發 return 函數。 }for (let v of obj) {if (v === 2) throw Error('error');console.log(v); // 打印出：1，之后觸發 return 函數，并報錯停止執行。 }

2 原生支持

2.1 默認持有遍歷器

原生默認持有遍歷器接口的數據結構有：
基本類型：Array, Set, Map（四種基本數據集合：Array, Object, Set 和 Map）。
類數組對象：arguments, NodeList, String。

let iterator = '123'[Symbol.iterator]();console.log( iterator.next() ); // {value: "1", done: false} console.log( iterator.next() ); // {value: "2", done: false} console.log( iterator.next() ); // {value: "3", done: false} console.log( iterator.next() ); // {value: undefined, done: true}

遍歷器與先前的遍歷方法
一個數據集合擁有遍歷器接口，并不意味著所有遍歷它的方法都是使用此接口。實際上，只有ES6新增的幾種方式和某些方法會使用，下面會有介紹。以數組來說，對其使用for和for of雖然可訪問到相同的成員，但是實際的操作方式卻不同。

// 改變數組默認的遍歷器接口。 Array.prototype[Symbol.iterator] = function () {let index = 0;let array = this;console.log('Use iterator');return {next() {return index < array.length ? { value: array[index++], done: false }: { value: undefined, done: true };}} };let arr = [1, 2];for (let v of arr) {console.log(v); // 打印出 Use iterator, 1, 2。 }for (let i = 0; i < arr.length; i++) {console.log(arr[i]); // 打印出 1, 2。 }arr.forEach(d => {console.log(d); // 打印出 1, 2。 });

對象沒有默認的遍歷器接口
為什么對象沒有默認的遍歷器接口？這要從兩方面說明。一為遍歷器是種線性處理結構，對于任何非線性的數據結構，部署了遍歷器接口，就等于部署一種線性轉換。二是對象本來就是一個無序的集合，如果希望其有序，可以使用Map代替。這即是各有其長，各安其職。屎殼郎如果不滾糞球而去采蜜，那，呃，花妹妹可能就遭殃咯。

自行生成的類數組對象（擁有length屬性），不具備遍歷器接口。這與String等原生類數組對象不同，畢竟人家是親生的，一出生就含著金鑰匙（也不怕誤吞）。不過我們可以將數組的遍歷器接口直接應用于自行生成的類數組對象，簡單有效無副作用。

let obj = {0: 'a',1: 'b',length: 2,[Symbol.iterator]: Array.prototype[Symbol.iterator] };let iterator = obj[Symbol.iterator](); console.log( iterator.next() ); // {value: "a", done: false} console.log( iterator.next() ); // {value: "b", done: false} console.log( iterator.next() ); // {value: undefined, done: true}

為對象添加遍歷器接口，也不影響之前不使用遍歷器的方法，比如for in, Object.keys等等（兩者不等同）。

let obj = {0: 'a',1: 'b',length: 2,[Symbol.iterator]: Array.prototype[Symbol.iterator] };console.log( Object.keys(obj) ); // ["0", "1", "length"]for (let v of obj) {console.log(v); // 依次打印出："a", "b"。 }for (let k in obj) {console.log(k); // 依次打印出："0", "1", "length"。 }

2.2 默認調用遍歷器

for of
for of是專門用來消費遍歷器的，其遍歷的是鍵值（for in遍歷的是鍵名）。

for (let v of [1, 2, 3]) {console.log(v); // 依次打印出：1, 2, 3。 }

擴展運算符
無論是解構賦值或擴展運算都是默認調用遍歷器的。

let [...a] = [3, 2, 1]; // [3, 2, 1] let b = [...[3, 2, 1]]; // [3, 2, 1]

yield*
在Generator函數中有yield*命令，如果其后面跟的是一個可遍歷的結構，它會調用該結構的遍歷器接口。

for (let v of G()) {console.log(v); // 依次打印出：1, 2, 3, 4, 5 }function* G() {yield 1;yield* [2,3,4];yield 5; }

其它場合
有些接受數組作為參數的函數，會默認使用數組的遍歷器接口，所以也等同于默認調用。比如Array.from(), Promise.all()。

延伸閱讀

關于ES6的Symbol：鏈接。

總結

以上是生活随笔為你收集整理的Iterator：访问数据集合的统一接口的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。