for in && for of

for…of

for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。

for (variable of iterable) {
    //statements
}

在遍历数组的时候的时候使用for…of

---

for…in

for...in语句以任意顺序遍历一个对象的可枚举属性（包括从其构造函数原型中继承的属性）。对于每个不同的属性，语句都会被执行。

for...in循环输出的属性名的顺序是不可预测的。具体来讲，所有属性都会被返回一次，但返回的先后次序可能会因浏览器而已。

for (variable in object) {...}

在循环对象属性的时候，使用for…in

---

二者区别

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

假设我们要遍历一个数组的value

let aArray = ['a',123,{a:'1',b:'2'}]

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


for(var value of aArray){
    console.log(value);
}
// a 123 {a: "1", b: "2"}


aArray.name = 'demo'

for(let index in aArray){
    console.log(`${aArray[index]}`);  
}
// a 123 [Object Object] demo

for(var value of aArray){
    console.log(value);
}
// a 123 {a: "1", b: "2"}

通过上述例子可得出结论：作用于数组的for-in循环除了遍历数组元素以外，还会遍历自定义属性。

本文参考自：https://segmentfault.com/q/1010000006658882