ECMAScript 6 之Iterator 和 for...of 循環

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]。