ES6中的Iterator遍历器和for...of循环

随着数据结构的增多，我们需要统一的对数据的遍历接口，ES6提供了Iterator遍历器。

1默认用法

默认实现了Iterator遍历器的数据结构可直接使用，如Array数组。代码如下：

let arr = ['a','b','c'];
let iter = arr[Symbol.iterator]();
iter.next() // { value: 'a', done: false }
iter.next() // { value: 'b', done: false }
iter.next() // { value: 'c', done: false }
iter.next() // { value: undefined, done: true }

由以上代码可见，使用遍历器接口可以遍历数组，返回值为一个对象，value为当前元素，done为一个布尔值，当该值为true时说明遍历到了数据机构的末尾。
写成循环是下面这个样子：

let arr = ['a','b','c'];
let iter = arr[Symbol.iterator]();
let i = {value:null,done:false};
while(!i.done){
    i=iter.next();
    console.log(i.value);
}
//a b c undefined

ES6中默认实现了Iterator接口的数据结构包括如下几种：

• Array
• Map
• Set
• String
• TypedArray
• 函数的 arguments 对象
• NodeList 对象

2实现自定义Iterator接口

默认实现了Iterator接口的数据结构都可以使用for...of遍历。

let obj = {
    name:'zhangsan',
    age:18,
    count:[{yuWen:80},{huaXue:90}]
}
for(let key of obj){
     console.log(key);
}
//报错： obj is not iterable

说明obj对象默认没有实现Iterator接口，那我们该如何去部署一个自定义的遍历器接口呢？

1. 为数据结构添加Symbol.iterator属性，其是一个函数
2. Symbol.iterator属性函数返回一个对象，该对象包含next方法
3. next方法返回一个{value:xxx,done:boolean}形式的对象
   代码如下：

let obj = {
    name:'zhangsan',
    age:18,
    count:[{yuWen:80},{huaXue:90}],
    [Symbol.iterator](){
        let index = 0;
        let map = new Map();
        for(let key in obj){
            map.set(key,obj[key]);
        }
        let arr = Array.from(map);
        return {
            next(){
                if(index

以上实现的遍历器返回的都是对象的value值，如果想返回对应的key值，只需将value:arr[index++][1],的索引变为0即可：

let obj = {
    name:'zhangsan',
    age:18,
    count:[{yuWen:80},{huaXue:90}],
    [Symbol.iterator](){
        let index = 0;
        let map = new Map();
        for(let key in obj){
            map.set(key,obj[key]);
        }
        let arr = Array.from(map);
        return {
            next(){
                if(index

ES6总篇--目录