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