for-in,for-of的区别

1.数组

使用for-in

let a = [1,2,3,4];
for(let x in a){ 
    console.log(x);
}

    下面我们来看看系统输出的值：

    从上面可以看出，通过for-in遍历数组，直接得到的是键值。

• 使用for-of

let a = [1,2,3,4];
for(let x of a){ 
    console.log(x);
}

    下面我们来看看系统输出的值：

    从上面我们可以看出，使用for-of遍历数组，得到的是具体的值。

2.对象

• 使用for-in

let b = {
    0:1,
    1:2,
    2:3
};
for(let x in b){
    console.log(x);
}

    下面我们来看看系统输出的值：

    从上面可以看出，通过for-in遍历对象，直接得到的是键值。

• 使用for-of

let b = {
    0:1,
    1:2,
    2:3
};
for(let x of b){
    console.log(x);
}

    从上面我们可以看出，系统直接报错了。

    若要想要使用for-of遍历对象，需要借助Object.entries()方法。

let b = {
    0:1,
    1:2,
    2:3
};
for(let x in Object.entries(b)){    console.log(x);
}

    从上面我们可以看出，直接遍历可以依次得到键和值组成的数组。

    因此我们可以结合es6的解构赋值，分别得到键和值。

for(let [key,value] in Object.entries(b)){    
    console.log(key,value);
}

    从上面我们可以看出，已经分别得到键和值啦。

3.Map集合

• 使用for-in(无法使用，控制台没有数据输出)
• 使用for-of

let map = new Map();
map.set("x","y");
map.set(true,1);
map.set(1,2);
for(let x of map){
    console.log(x);
}

    从上面我们可以看出，直接遍历可以依次得到键和值组成的数组。

    和普通对象一样，我们也可以和es6的解构赋值相结合。

for(let [key,value] in Object.entries(b)){    
    console.log(key,value);
}

4.Set集合

• 使用for-in(无法使用，控制台没有数据输出)
• 使用for-of

let a = [1,2,3,4];
let set = new Set(a);
for(let x of set){
    console.log(x);
}

    从上面我们可以看出，我们可以直接得到Set集合中的值。

总结：

1. 数组和对象都可以使用for-in进行遍历。
2. 数组、对象、Map、Set都可以使用for-of进行遍历，但普通对象(没有iterator接口)需要借助Object.keys(),Object.values(),Object.entries()等方法。
3. 使用for-in遍历得到的是键，使用for-of遍历得到的是值。
4. 另外，数组、Map、Set都有自己的keys(),values(),entries()方法，普通对象需要借助Object的Object.keys(),Object.values(),Object.entries()方法。