1. 概述
遍歷器(Iterator
)是一種接口,爲各種不同的數據結構提供統一的訪問機制。任何數據結構只要部署 Iterator
接口,就可以完成遍歷操作。
遍歷器的作用主要有兩個:
- 爲各種數據結構,提供一個統一的、簡便的訪問接口,使得數據結構的成員能夠按某種次序排列。
- 供
for...of
循環調用。
Iterator
的遍歷過程是這樣的:
- 創建一個指針對象,指向當前數據結構的起始位置。
- 第一次調用指針對象的
next
方法,可以將指針指向數據結構的第一個成員。 - 不斷調用指針對象的
next
方法,直到它指向數據結構的結束位置。
每一次調用next
方法,都會返回數據結構的當前成員的信息。具體來說,就是返回一個包含value
和done
兩個屬性的對象。其中,value
屬性是當前成員的值,done
屬性是一個布爾值,表示遍歷是否結束。
下面是一個模擬Iterator
遍歷的例子。
function myIterator(item) {
var index = 0;
return { // 返回一個對象,具有next方法
next(){
if(index < item.length) {
return { value: item[index++], done: false };
}else{
return { value: undefined, done: true } ;
}
}
}
}
var it = myIterator(['a', 'b']);
it.next(); // {value: "a", done: false}
it.next(); // {value: "b", done: false}
it.next(); // {value: undefined, done: true}
2. 默認 Iterator 接口
ES6 規定,默認的 Iterator
接口部署在數據結構的Symbol.iterator
屬性,即一個數據結構只要具有Symbol.iterator
屬性,就可以認爲是“可遍歷的”。Symbol.iterator
屬性本身是一個函數,就是當前數據結構默認的遍歷器生成函數。執行這個函數,就會返回一個遍歷器。
var obj = {
[Symbol.iterator]() {
return {
next() {
return { value: "jidi", done: true }
}
}
}
}
上面例子中,對象obj
就是可遍歷的,因爲具有Symbol.iterator
屬性,執行該屬性,會返回一個遍歷器對象。該對象的根本特徵就是具有next
方法,每次調用next
方法都會返回一個代表當前成員的信息對象,該對象具有value
和done
兩個屬性。
ES6 的有些數據結構原生具備Iterator
接口:
- Array
- Map
- Set
- String
- TypedArray
- 函數的 arguments 對象
- NodeList 對象
var array = ["a", "b", "c"];
// 獲取數組原生遍歷器對象
var it = array[Symbol.iterator]();
it.next(); // {value: "a", done: false}
it.next(); // {value: "b", done: false}
it.next(); // {value: "c", done: false}
it.next(); // {value: undefined, done: true}
上面例子中,array
是一個數組,原生部署了Symbol.iterator
屬性,通過該屬性就可以拿到遍歷器對象。
對於沒有部署iterator
接口的其它數據結構,都需要自己在Symbol.iterator
屬性上面部署,這樣纔會被for...of
循環遍歷。
var person = {
name: "jidi",
age: 22,
[Symbol.iterator](){
const self = this;
let index = 0;
let array = Object.getOwnPropertyNames(self); // 存儲對象屬性名
return { // 返回一個遍歷器對象
next() {
if(index < array.length){
return { value: self[array[index++]], done: false}
}else{
return { value: undefined, done: true }
}
}
}
}
}
let it = person[Symbol.iterator](); // 獲取對象遍歷器對象
it.next(); // {value: "jidi", done: false}
it.next(); // {value: 22, done: false}
it.next(); // {value: undefined, done: true}
// for of 循環遍歷
for(let item of person) {
console.log(item);
}
// jidi
// 22
上面代碼,爲對象person
添加了Symbol.iterator
屬性(函數),並且執行結果返回一個遍歷器對象,就可以被for ... of
循環遍歷。
對於類似數組的對象(存在數值鍵名和length
屬性),部署 Iterator
接口,可以直接引用數組的 Iterator
接口。
let myArray = {
0: "jidi",
1: 22,
length: 2,
[Symbol.iterator]: Array.prototype[Symbol.iterator]
}
for (let item of myArray){
console.info(item);
}
// jidi
// 22
上面代碼中,定義了一個類似數組的對象myArray
,然後直接使用數組的iterator
接口作爲自己的iterator
接口實現,就能被for ... of
循環遍歷。
3. 調用 Iterator 接口的場合
有一些場合會默認調用 Iterator
接口(即Symbol.iterator
方法):
(1) 解構賦值
對數組和Set
結構進行解構賦值,會默認調用Symbol.iterator
方法。
let s1 = new Set(["a", "b", "c"]);
let [x, y, z] = s1;
x; // "a"
y; // "b"
z; // "c"
let [...reset] = s1;
reset; // ["a", "b", "c"]
(2)擴展運算符
擴展運算符(...
)也會調用默認的Iterator
接口。
var name = "jidi";
[...name]; // ["j", "i", "d", "i"]
實際上,只要部署了iterator
接口的數據結構,都可以使用擴展運算符快速轉爲數組。以上面自定義部署了iterator接口的person
對象爲例。
[...person]; // ["jidi", 22]
(3)yield*
yield*
後面跟的是一個可遍歷的結構,它會調用該結構的遍歷器接口。
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 }
(4)接受數組作爲參數的場合
數組的遍歷會調用遍歷器接口,任何接受數組作爲參數的場合,其實都調用了遍歷器接口。
4. 遍歷器對象的 return(),throw()
遍歷器對象除了具有next
方法,還可以具有return
方法和throw
方法。自定義遍歷器對象生成函數,next
方法是必須部署的,return
方法和throw
方法是否部署是可選的。
var person = {
name: "jidi",
age: 22,
[Symbol.iterator](){
const self = this;
let index = 0;
let array = Object.getOwnPropertyNames(self); // 存儲對象屬性名
return { // 返回一個遍歷器對象
next() {
if(index < array.length){
return { value: self[array[index++]], done: false}
}else{
return { value: undefined, done: true }
}
},
return() {
console.log("調用了return方法......")
return { value: undefined, done: true }
}
}
}
}
下面兩種情況,都會調用return
方法。
// 情況一
for (let item of person) {
if(item === "jidi"){
break;
}
}
// 調用了return方法......
// 情況二
for (let item of person) {
if(item === "jidi"){
throw new Error("異常!")
}
}
// 調用了return方法......
// Uncaught Error: 異常!
5. for…of 循環
ES6 引入了for...of
循環,作爲遍歷所有數據結構的統一的方法。
一個數據結構只要部署了Symbol.iterator
屬性,就被視爲具有 iterator
接口,就可以用for...of
循環遍歷它的成員。即for...of
循環內部調用的是數據結構的Symbol.iterator
方法。
var person = {
name: "jidi",
age: 22
}
var value = Object.values(person);
for(let item of value){
console.log(item)
}
// jidi
// 22
6. 參考鏈接
本篇博文是我自己學習筆記,原文請參考:ECMAScript 6 入門
如有問題,請及時指出!
歡迎溝通交流,郵箱:[email protected]。