ES6 疊代器（Iterator）

ES6疊代器

目錄

• ES6疊代器
• • 疊代器（Iterator）
  • • 介紹
    • 基本文法
    • 應用
  • for...of循環
  • • 文法
    • 基本操作
    • for...of與for...in的差別

疊代器（Iterator）

介紹

Iterator疊代器從一個資料集合中按照一定的順序，不斷的取出資料的過程

Iterator的作用：

• 為各種資料結構，通提供一個接口
• 使得資料結構的成員能夠按某種次序排列
• ES6創造了一種新的周遊指令for…of循環，Iterator接口主要供for…of消費
• 疊代強調是依次取出，不能确定取出的有多少，也不能保證把資料全部取完

基本文法

疊代器是一種特殊對象，每個疊代對象都有一個next()方法，該方法有兩個屬性：

• value：傳回查詢的值
• done：判斷是否疊代結束，傳回值為布爾

function createIterator(items){
  	var nextIndex  = 0;
  	return{
    	next(){
      		var done = (nextIndex  >= items.length);
      		var value = !done ? items[nextIndex ++] : undefined;
            return{
                done,
                value
            }
    	}
  	}
}

// 建立一個疊代器
var a = createIterator([1,2,3]);

console.log(a.next()); // {done: false, value: 1}
console.log(a.next()); // {done: false, value: 2}
console.log(a.next()); // {done: false, value: 3}
console.log(a.next()); // {done: true, value: undefined}
           

分析Iterator的周遊過程：

1. 建立一個對象，指向目前資料結構的起始位置。（指針）
2. 第一次調用指針對象的next(),指針指向資料結構的第一個成員
3. 第二次調用指針對象的next(),指針指向資料結構的第二個成員
4. 第n次調用指針對象的next(),指針指向資料結構的第n個成員
5. 當done為true時，疊代結束

應用

在es6中,如果對象具有知名符号的屬性 Symbol.iterator,則表示對象可以疊代

ES6 的有些資料結構原生具備 Iterator 接口（比如數組），即不用任何處理，就可以被for…of循環周遊：

const arr = [545,874854,15485,54854,6];
const iterator = arr[Symbol.iterator]();

iterator.next() // { value: 545, done: false }
iterator.next() // { value: 874854, done: false }
           

自定義可疊代對象：

const obj = {
    a : 1,
    b : 2,
    [Symbol.iterator](){   //for of循環肯定是會走到這個函數中的
        const keys = Object.keys(this);
        let i = 0;
        return {
            next:() => {
                const propName = keys[i];
                const propValue = this[propName];
                const result = {
                    value : {
                        propName,
                        propValue,
                        name : "name"
                    },
                    done : i >= keys.length
                }
                i ++;
                return result;
            }
        }
    }
}

for(const item of obj){
    console.log(item)
}
           

調用Iterator接口的場合:

• 解構指派：對數組和 Set 結構進行解構指派時，會預設調用Symbol.iterator方法
• 擴充運算符：擴充運算符（…）也會調用預設的 Iterator 接口
• yield：yield後面跟的是一個可周遊的結構，它會調用該結構的周遊器接口
• 原生具備Iterator接口的資料結構（部署了Symbol.iterator屬性）：
  • 字元串（類數組）
  • 數組（Array）
  • 資料結構-Set
  • 資料結構-Map
  • TypedArray
  • 函數的arguments對象
  • NodeList 對象

回到頂部 目錄

for…of循環

for of 循環就是專門周遊可疊代的對象的,不是可疊代的對象不能使用forof周遊

for…of循環内部調用的是：資料結構的Symbol.iterator方法，是以隻要是能調用Iterator接口的場合都可以使用

文法

for (variable of iterable) {
    //statements
}
           

• variable：在每次疊代中，将不同屬性的值配置設定給變量
• iterable：被疊代枚舉其屬性的對象

基本操作

有些資料結構是在現有資料結構的基礎上，計算生成的，比如，ES6 的數組、Set、Map 都部署了以下三個方法，調用後都傳回周遊器對象：

• entries() 傳回一個周遊器對象，用來周遊[鍵名, 鍵值]組成的數組
• keys() 傳回一個周遊器對象，用來周遊所有的鍵名
• values() 傳回一個周遊器對象，用來周遊所有的鍵值

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

for…of與for…in的差別

• for…in 語句以任意順序疊代對象的可枚舉屬性
• for…of 語句周遊可疊代對象定義要疊代的資料
• 就來數組來說for…in 的是下标，for…of的是value

let iterable = [10, 20, 30];
for (const value of iterable) {
    console.log(value);
}
// 10,20,30
for (const i in iterable) {
    console.log(i);
}
// 0,1,2
           

回到頂部 目錄