每日一题：for...of 和 for...in 的区别

前言

大家好，我是JOJO。梦想是每天睡到自然醒！

今天呢，跟大家一起来回答一道面试题

题目

问: for...of 和 for...in 的区别?

思考

平时我们在写代码的时候，用的比较多应该是for...in,比如我们在遍历对象的属性时候。大家肯定都用过这个语法！

那么对于for...of,大家没用过、或者用的比较少。因为这是es6的语法，用于遍历可迭代对象的。可迭代对象包括（Array,String,Map,Set,TypedArray,arguments）等等；

结合我们平时使用的案例来分析一下，他们的区别；

案例

var obj={a:'a0',b:'b0'};
var array=['a0','b0'];
var map=new Map([    ['a','a0'],
    ['b','b0']
]);
var set=new Set(['a0','b0']);
​
//for in
for(var p in obj){
    console.log(p)
}
//输出:a,b
​
for(var p in array){
    console.log(p)
}
//输出:0,1
​
for(var p in map){
    console.log(p)
}
//输出:什么也没有
for(var p in set){
    console.log(p)
}
//输出:什么也没有
​
//for of
for(var p of obj){
    console.log(p)
}
//TypeError: obj is not iterable
​
for(var p of array){
    console.log(p)
}
//输出:a0,a1
​
for(var p of map){
    console.log(p)
}
//输出:[ 'a', 'a0' ],[ 'b', 'b0' ]
for(var p of set){
    console.log(p)
}
//输出:a0,a1
​
​

通过上面的代码，我们可以看出俩个区别

1. 输出不一样

   1. for...in 输出的是元素的key
   2. for...of输出的是元素的值

2. 作用的数据对象不一样

   1. for...in 可以用于array，object,不能作用于Map，set
   2. for...of 不能用于object，可以作用于array,map,set

总结

为什么会这样呢？或者说，到底什么样的数据可以for...in，什么样的数据用for...of

前面有提到一个概念叫可迭代。还有一个概念是叫可枚举。

• for...in 用于可枚举数据。如：object，array，string

• for...of 用于可迭代对象。前面所说的可迭代对象包括（Array,String,Map,Set,TypedArray,arguments）等等；

好了，今日的问题回答完毕了。

有什么问题、或者有什么不同的看法都可以一起来聊聊！

\