javascript總for of和for in的區別？

先說結論：

1. 推薦在循環對象屬性的時候，使用for...in,在遍歷數組的時候的時候使用for...of。

2. for...in循環出的是key，for...of循環出的是value

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

4. 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]);
}