for of vs for in

for...ofサイクル
一つのデータ構造はSymbol.iterator属性を展開すれば、iteratorインターフェースを持っていると見なされ、for...ofサイクルでそのメンバーを遍歴することができます.つまり、for…ofサイクル内部で呼び出したのは、データ構造のSymbol.iterator方法です.
for...ofサイクルが使用できる範囲は、配列、セット、およびMap構造、いくつかの類似配列のオブジェクト(例えば、argmentsオブジェクト、DOM NodeListオブジェクト)、Generatorオブジェクト、および文字列を含む.

let arr = [1,2,3,"1","2","3",{a:'a'},{b:'b'}]
for (let key in arr){
    console.log(key)
}
for (let value of arr){
    console.log(value)
}

0
 1
 2
 3
 4
 5
 6
 7

1
 2
3
 1
 2
 3
 {a: "a"}
 {b: "b"}

注意
普通のオブジェクトに対しては、for...of構造は直接使用できません.エラーが発生します.Iteratorインターフェースを配置してから使えば、keyと組み合わせても使えます.

var student={
    name:'xiaohui',
    age:22,
    locate:{
    country:'china',
    city:'hangzho',
    
    }
}

console.log(Object.keys(student))
 for(var key of Object.keys(student)){
    //  Object.keys()      key   
   console.log(key+": "+student[key]);
 }
["name", "age", "locate"]
"name: xiaohui"
"age: 22"
"locate: [object Object]"

まとめ:
1.循環オブジェクト属性の場合は、for...inを使用し、配列を巡回するときはfor...ofを使用することを推奨します.
2.for…in循環するのはkey、for…of循環するのはvalueです.
3.for…ofはES 6が新しく導入した特性です.ES 5導入のfor…inの不足を修復しました.
4.for…ofは普通のオブジェクトを循環できないので、Object.keys()と組み合わせることで使用する必要があります.