ES6（五）--iterator和for-of循环

什么是Iterator

Iterator是一种接口，为不同的数据结构提供统一的访问机制。任何数据结构只要部署了Iterator接口，就可以完成遍历，而且这种遍历操作是依次遍历该数据结构的所有成员

Iterator遍历器的作用

1.为各种数据结构提供一个统一的，简便的访问接口

2.使得数据结构的成员能够按照某种次序排列

3.ES6新增的遍历for...of循环，Iterator接口主要供for...of消费

Iterator的遍历过程

1.创建一个指针对象，指向当前数据结构的起始位置。也就是说遍历器对象本质上就是一个指针对象

2.第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员

3.第二次调用指针对象的next方法，指针就指向数据结构的第二个成员

4.不断的调用指针对象的next方法，直到它指向数据结构的结束位置

每一次调用next方法，都会返回数据结构的当前成员信息。具体来说，就是返回一个包含value,done两个属性的对象。其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束

实现一个简单的Iterator

const arr = ["a", "b", "c"];

function Iterator(arr) {
    let i = 0;

    return {
        next: function () {
            return i < arr.length ?
                {value: arr[i++], done: false} : {value: undefined, done: true}
        }
    }
}

const it = Iterator(arr);    
console.log(it.next());//{value: "a", done: false}
console.log(it.next());//{value: "b", done: false}
console.log(it.next());//{value: "c", done: false}
console.log(it.next());//{value: undefined, done: true}

数据结构的遍历

并不是所有的数据结构（Array，Object，set，map）都支持Iterator遍历，只有具有Symbol.iterator属性的数据结构才有Iterator接口，比如下面

const arr = ["a", "b", "c"];
const set = new Set(["a", "b", "c"]);
const map = new Map([["a", 1]]);

const itArr = arr[Symbol.iterator]();
const itSet = set[Symbol.iterator]();
const itMap = map[Symbol.iterator]();

console.log(itArr);//Array Iterator {}
console.log(itSet);//SetIterator {"a", "b", "c"}
console.log(itMap);//MapIterator {"a" => 1}

console.log(itSet.next());//{value: "a", done: false}
console.log(itSet.next());//{value: "b", done: false}
console.log(itSet.next());//{value: "c", done: false}
console.log(itSet.next());//{value: undefined, done: true}

const obj = {};
console.log(obj[Symbol.iterator]);//undefined

Array,Set,Map都具有Symbol.iterator属性，而Object没有。

Iterator应用

具备Iterator接口的数据结构都可以进行以下操作

1.解构赋值

const set = new Set(["a", "b", "c"]);
let [a, b] = set;

console.log(a);
console.log(b);

关于解构赋值详细看这里

2.扩展运算符...

const set = new Set(["a", "b", "c"]);
console.log(...set);//a b c

扩展运算符...的作用是把数据结构里面的每一项进行展开，结合Set和扩展运算符可以进行数组的去重

const newArr = [1, 2, 3, 1, 2, 3, 1, 3, 1];
console.log([...new Set(newArr)]);

利用了set数据结构的唯一性和...展开数据结构

Iterator和for of

一般的for of循环

const map = new Map([["a", 1], ["b",2]]);
for (let i of ofMap) {
    console.log(i);
}
//["a",1] ["b",2]

具有Iterator属性的数据结构可以这样

const map = new Map([["a", 1], ["b",2]]);
for (let [key, value] of ofMap) {
    console.log("key:" + key + " " + "value:" + value);
}

//key:a value:1
//key:b value:2
//key:c value:3

直接把每一项的key和value取到