for...in...和for...of...的区别

注：for...of是ES6新引入的特性。修复了ES5引入的for...in的不足
先定义一个数组：let aArray = ['a', 123, { a: '1', b: '2' }];
for...in循环：

for (let index in aArray) {
        console.log(aArray[index]); // a 123 {a: "1", b: "2"}
    }

for...of循环：

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

这里结果一样，for...in循环出的是key，for...of循环出的是value

假设我们往数组中添加一个属性aArray.name = 'hi'，再看两个循环的结果：

for (let index in aArray) {
        console.log(aArray[index]); // a 123 {a: "1", b: "2"} hi
    }
    for (var value of aArray) {
        console.log(value);  // a 123 {a: "1", b: "2"}
    }

得出结论：作用于数组的for-in循环除了遍历数组元素以外,还会遍历自定义属性。
for...of循环不会循环对象的key，只会循环出数组的value，因此for...of不能循环遍历普通对象,对普通对象的属性遍历推荐使用for...in

循环一个对象试一下：

    var student = {
        name: 'wujunchuan',
        age: 22,
        locate: {
            country: 'china',
            city: 'xiamen',
            school: 'XMUT'
        }
    }
    for (let index in student) {
        console.log(student[index]);  // wujunchuan 22 {country: "china", city: "xiamen", school: "XMUT"}
    }
    for (var value of student) {
        console.log(value);  // student is not iterable
    }

因此for...of不能循环遍历普通对象

总结:
1.for...in循环出的是key值，for...of循环出的是value值
2.推荐在循环对象属性的时候，使用for...in,在遍历数组的时候的时候使用for...of
3.for...of不能循环普通的对象，需要通过和Object.keys()搭配使用