js中for in与for of之间的差异

先说结论：

推荐在循环对象属性的时候，使用for…in,在遍历数组的时候的时候使用for…of。

for…in循环出的是key，for…of循环出的是value

注意，for…of是ES6新引入的特性。修复了ES5引入的for…in的不足

for…of不能循环普通的对象，需要通过和Object.keys()搭配使用

假设我们要遍历一个数组的valuelet aArray = [‘a’,123,{a:’1’,b:’2’}]

使用for…in循环：

for(let index in aArray){
console.log(`${aArray[index]}`);
}

使用for…of循环：

for(var value of aArray){
console.log(value);
}

咋一看好像好像只是写法不一样而已，那为什么说for…of修复了for…in的缺陷和不足。

假设我们往数组添加一个属性name:

aArray.name = ‘demo’,再分别查看上面写的两个循环：

for(let index in aArray){
console.log(`${aArray[index]}`); //Notice!!aArray.name也被循环出来了
}
for(var value of aArray){
console.log(value);
}

所以说，作用于数组的for-in循环除了遍历数组元素以外,还会遍历自定义属性。

for…of循环不会循环对象的key，只会循环出数组的value，因此for…of不能循环遍历普通对象,对普通对象的属性遍历推荐使用for…in

如果实在想用for…of来遍历普通对象的属性的话，可以通过和Object.keys()搭配使用，先获取对象的所有key的数组

然后遍历：

var student={
name:'wujunchuan',
age:22,
locate:{
country:'china',
city:'xiamen',
school:'XMUT'
}
}
for(var key of Object.keys(student)){
//使用Object.keys()方法获取对象key的数组
console.log(key+": "+student[key]);
}