ECMAscript6快速入門-iterator

1.Iterator（ 遍歷器） 的概念

JavaScript 原有的表示“ 集合” 的數據結構， 主要是數組（ Array） 和對象（ Object）， ES6 又添加了 Map 和 Set。 這樣就有了四種數據集合， 用戶還可以組合使用它們， 定義自己的數據結構， 比如數組的成員是 Map， Map 的成員是對象。 這樣就需要一種統一的接口機制， 來處理所有不同的數據結構。

es6中新增了 for..of 循環

• 手寫Iterator接口

const arr = [1,2,3];
function iterator(arr){
    let index = 0;
    return {
        next : function(){
                return index<arr.length?
                {value:arr[index++],done:false}:
                {value:undefind,done:true}
        }
    }
}

在 ES6 中， 有些數據結構原生具備 Iterator 接口（ 比如數組）， 即不用任何處理， 就可以被for…of循環遍歷， 有些就不行（ 比如對象）。 原因在於，這些數據結構原生部署了Symbol.iterator屬性（ 詳見下文）， 另外一些數據結構沒有。 凡是部署了Symbol.iterator屬性的數據結構， 就稱爲部署了遍歷器接口。 調用這個接口， 就會返回一個遍歷器對象。

2.具有Symbol.iterator 屬性的數據結構都具有Iterator接口

const arr = [1,2,3];
const set = new Set([1,2,3]);
const map = new Map([[1,2],[3,4]]);
arr[Symbol.iterator]();
set[Symbol.iterator]();
map[Symbol.iterator]();

3.具備iterator接口的數據結構都可以進行如下操作

1.解構賦值

const set = new Set([1,2,3]);
let [x,y,z] = set;
console.log(x,y,z);

2.擴展運算符

let str = 'hongtao';
let arrStr = [...str];

利用set進行數組去重

const arr = [1,1,'a','b','a',2,1];
console.log([...new Set(arr)]);

3.for…of循環

const ofarr = [1,2,3,4];
for(let i of ofarr){
    console.log(i);
}

const map = new Map();
map.set('a',1).set('b',2).set('c',3);
for(let data of map){
    console.log(data)//['a',1].....
}

for(let [key,value] of map){
    console.log(key,value);
}