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

作者：George_Leonard 链接：https://www.jianshu.com/p/325f05c95c6a 来源：简书

注：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()搭配使用

作者：George_Leonard 链接：https://www.jianshu.com/p/325f05c95c6a 来源：简书