---

title: es6基础知识3（迭代）
tags:

• 迭代
  categories:
• 前端

---

1. 迭代器

es6中新增了迭代器，迭代器是一种特殊的对象，它具有专门为迭代过程设计的接口。迭代器根据迭代协议来设计，每一个迭代器都包含了一个next()方法，在这个方法中给出了每一次的返回值value以及迭代时候完成的标记done。

与迭代器对应的叫迭代对象，迭代对象指的就是可以被迭代的对象，也就是具有迭代器的对象，在es6中具体就指包含Symbol.iterator方法的对象。

迭代语句有两种，for...in和for...of，这两者的区别在于for...in以原始插入的顺序迭代对象的可枚举属性，for...of根据迭代对象的迭代器具体实现迭代对象数据.

举一个简单的例子：

var arr = ['a', 'b' ,'c'];

for (var attr in arr) {
    console.log(attr, arr[attr]);
}// 0 a
 // 1 b
 // 2 c


for (var attr of arr) {
    console.log(attr);
}// a
 // b
 // c

这里要注意for...in和for...of的差异，for...in迭代的值书数组的索引，for...of迭代的值是数据每一想的值。

数组arr能够进行迭代，或者说能够使用for...in和for...of的原因在于，数组对象自身带有了迭代器方法。

[图片上传失败...(image-7c2a6e-1561387452654)]

这里的symbol属性正是属性私有化的应用

如果随意在一个对象上使用for...in或者for...of,这个对象没有迭代器的话，就会报错：

var obj = {
    left: 100;
    top: 200;
}

for( var k of obj) {
    console.log(k);
}

对象没有迭代器

此时控制台显示对象是不可迭代的，原因就在于对象obj没有实现迭代器方法

迭代器依据迭代协议来实现，可以为obj对象创建一个迭代器，从而把obj对象转化为可迭代对象，具体的写法:

var obj = {
    left: 100,
    top: 200
};

// 迭代协议
obj[Symbol.iterator] = function() {
    let keys = Object.keys(obj);    //['left','top']
    let len = keys.length;
    let n = 0;


    return {
        next: function() {//迭代器的关键于next函数


            if (n < len) {
                return {
                    value: {k: keys[n], v: obj[keys[n++]]},
                    done: false
                }
            } else {
                return {
                    done: true
                }
            }

        }
    }
}

// 通过给原对象增添一个迭代器函数从而将一个普通对象转变为了可迭代对象

for (var {k, v} of obj) { //of 是一个可迭代的对象
    console.log(k, v);// left 100
                      // top 200

}