for循环in和of

for ... in

把一个对象的所有属性依次循环出来：

var o = {
    name: 'Jack',
    age: 20,
    city: 'Beijing'
};
for (var key in o) {
    console.log(key); // 'name', 'age', 'city'
}

要过滤掉对象继承的属性，用hasOwnProperty()来实现：

var o = {
    name: 'Jack',
    age: 20,
    city: 'Beijing'
};
for (var key in o) {
    if (o.hasOwnProperty(key)) {
        console.log(key); // 'name', 'age', 'city'
    }
}

由于Array也是对象，而它的每个元素的索引被视为对象的属性，因此，for ... in循环可以直接循环出Array的索引：

var a = ['A', 'B', 'C'];
for (var i in a) {
    console.log(i); // '0', '1', '2'
    console.log(a[i]); // 'A', 'B', 'C'
}

请注意，for ... in对Array的循环得到的是String而不是Number。

for..of

let listData = ['a', 'b', 'c', 'd'];
for (let value of listData) {
    console.log('value', value) // a b c d
}

先说结论：

1、推荐循环对象属性，使用for...in, 遍历数组使用for...of

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

3、for...of是ES6新引入的特性。修复ES5的for...in的不足

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

假设遍历一个数组

使用for...in：

let aArray = ['a', 'b', 'c'];
for (let index in aArray) {
    console.log(aArray[index]); // 输出a b c
}

使用for...of：

let aArray = ['a', 'b', 'c'];
for (let value of aArray) {
    console.log(value);  // 输出a b c
}

好像只是写法不一样而已，为什么说for...of修复了for...in的缺陷和不足。
假设我们往数组添加一个属性name:
aArray.name = 'demo',再分别查看上面写的两个循环：

let aArray = ['a', 'b', 'c'];
aArray.name = 'demo';
for (let index in aArray) {
    console.log(aArray[index]); // 输出a b c demo
}
for(var value of aArray){
    console.log(value); // 输出a b c
}

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

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

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

let student = {
    name: '小猪',
    age: 22,
    locate: {
        country: '中国',
        city: '广州',
    }
};

// 使用Object.keys()方法获取对象key的数组
for (let key of Object.keys(student)) {
    console.log(key, student[key]); 
}