for...in和for...of循环的区别

使用for...in和for...of分别对Array,Set,Map做测试

var a=["A","B","C"];
    var b=new Set(["A","B","C"]);
    var c=new Map([1,'x'],[2,'y'],[3,'z']);
    //遍历数组
    for(var i of a){
        alert(i)//拿到的是值A B C
    }
    for(var i in a){
        alert(i)//拿到的是下标0 1 2
    }
    //遍历Set集合
    for(var i of b){
        alert(i);拿到Set集合每个元素的值
    }
    for(var i in b){
        alert(i);//不起作用，不能使用for...in循环Set集合
    }
    //遍历Map集合
    for(var i of c){
        alert(i[0]+"="+i[i]);//既可以拿到键也可以拿到值
    }
    for(var i in c){
        alert(i[0]+"="+i[i]);//for...in循环不能用于Map
    }

for...in由于历史遗留问题，它遍历的实际上是对象的属性名称。一个Array数组也是一个对象，数组中的每个元素的索引被视为属性名称，所以我们可以看到使用for...in循环Array数组时，拿到的其实是每个元素的索引。

    var a=['A','B','C'];
    a.name='Hello';
    for (var i in a){
        alert(i);//'0','1','2','name'
    }
    

如上所示，当我们为a多手动添加一个属性name的时候，for...in循环会把name属性也包括在内，而Array的length属性却不包括在内。
for...of循环则不存在上述的问题，它只循环集合本身的元素。这就是为什么引入for...of循环。