es6+最佳入門實踐(9)

9.Iterator和for...of

9.1.Iterator是什麼？

Iterator又叫做迭代器，它是一種接口，爲各種不同的數據結構提供統一的訪問機制。這裏說的接口可以形象的理解爲USB接口，有了這個接口可以做不同的事情，在編程中所說的接口最終都是要通過一段代碼塊來實現這個接口功能的。而Iterator接口提供的統一訪問機制主要表現爲遍歷操作，任何數據類型只要具有Iterator接口，就可以完成遍歷操作(遍歷操作指依次處理該數據結構的所有成員)，總結起來就是說我們需要一種統一的機制來依次處理某種數據結構的所有成員，這種處理機制就是Iterator所做的事情

下面我們來實現這種機制，它需要具備依次處理數據結構的所有成員，那意味着我們執行一次方法就可以處理一個成員

function Iterator(arr) {
    var index = 0;
    return {
        next: function () {
            if(index < arr.length){
                return {value: arr[index++]}
            }else {
                return {done: false}
            }
        }
    }
}
var it = Iterator([1,2,3]);
console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());    function Iterator(arr) {
    var index = 0;
    return {
        next: function () {
            if(index < arr.length){
                return {value: arr[index++]}
            }else {
                return {done: false}
            }
        }
    }
}
var it = Iterator([1,2,3]);
console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

一種數據結構只要部署了Iterator接口，我們就稱這種數據結構是可以迭代的，在ES6中，只要是一個數據結構具有了Symbol.iterator屬性，那麼就認爲是可迭代的，其實，Symbol.iterator就是一個函數，實現的功能和我們上面手寫的功能差不多。

在ES6中，有些數據結構原生就具備了Iterator接口，例如：Array、Map、Set、String等

let arr = [1,2,3,4];
let it = arr[Symbol.iterator]()
console.log(it.next())
console.log(it.next())
console.log(it.next())
console.log(it.next())
console.log(it.next())

Iterator的應用場景舉例：

1.在解構賦值的時候默認調用Iterator接口

let arr = [1, 2, 3];
let [x, y, z] = arr;
console.log(x, y, z)

2.擴展運算符使用等時候也默認調用Iterator接口

let st = 'nodeing'
console.log([...st])

9.2.for...of方法

在ES6中，引入了for...of循環，作爲遍歷所有數據結構的統一方法，在for...of循環內部也是調用數據結構的Symbol.iterator方法

let st = 'nodeing';

for (let a of st){
    console.log(a)
}

注意：對象是不可迭代的

//對象是不可迭代的
let obj = {
    name: 'xiaoqiang',
    age: 18
};
// obj is not iterable
for (let a of obj){
    console.log(a)
}

視頻教程地址：http://edu.nodeing.com/course/50