iterator和for of 循環
JavaScript 原有的表示“集合”的數據結構,主要是數組(Array
)和對象(Object
),ES6 又添加了Map
和Set
。這樣就有了四種數據集合,用戶還可以組合使用它們,定義自己的數據結構,比如數組的成員是Map
,Map
的成員是對象。這樣就需要一種統一的接口機制,來處理所有不同的數據結構。
遍歷器(Iterator)就是這樣一種機制。它是一種接口,為各種不同的數據結構提供統一的訪問機制。任何數據結構只要部署 Iterator 接口,就可以完成遍歷操作(即依次處理該數據結構的所有成員)。
Iterator 的作用有三個:一是為各種數據結構,提供一個統一的、簡便的訪問接口;二是使得數據結構的成員能夠按某種次序排列;三是 ES6 創造了一種新的遍歷命令for...of
for...of
消費。
Iterator 的遍歷過程是這樣的。
(1)創建一個指針對象,指向當前數據結構的起始位置。也就是說,遍歷器對象本質上,就是一個指針對象。
(2)第一次調用指針對象的next
方法,可以將指針指向數據結構的第一個成員。
(3)第二次調用指針對象的next
方法,指針就指向數據結構的第二個成員。
(4)不斷調用指針對象的next
方法,直到它指向數據結構的結束位置。
每一次調用next
方法,都會返回數據結構的當前成員的信息。具體來說,就是返回一個包含value
和done
兩個屬性的對象。其中,value
屬性是當前成員的值,done
屬性是一個布爾值,表示遍歷是否結束。
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}; } }; }
原生具備 Iterator 接口的數據結構如下。
- Array
- Map
- Set
- String
- TypedArray
- 函數的 arguments 對象
- NodeList 對象
一個數據結構只要部署了Symbol.iterator
屬性,就被視為具有 iterator 接口,就可以用for...of
循環遍歷它的成員。也就是說,for...of
循環內部調用的是數據結構的Symbol.iterator
方法。
for...of
循環可以代替數組實例的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
循環,只能獲得對象的鍵名,不能直接獲取鍵值。ES6 提供for...of
循環,允許遍歷獲得鍵值。
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
循環讀取鍵名,for...of
循環讀取鍵值。如果要通過for...of
循環,獲取數組的索引,可以借助數組實例的entries
方法和keys
方法
iterator和for of 循環