for...in和for...of两个遍历
- for...in是es5标准，用来遍历key值，遍历对象和数组
// 遍历对象
let obj = {
a: 1,
b: 2,
c: 3
}
for (let key in obj) {
console.log(key)
} // a b c
// 遍历数组
let arr = [1, 2, 3]
for (let key in arr) {
console.log(key)
} // 0 1 2
- for...of是es6标准，用来遍历value值，遍历数组，不能遍历普通对象
// 遍历数组
let arr = [1, 2, 3]
for (let value of arr) {
console.log(value)
} // 1 2 3
区别
- for...in遍历key值，for...of遍历value值
- for...in可以遍历对象或者数组，但是一般不推荐遍历数组，for...of不能遍历普通对象
for...of不能遍历普通对象的原因
原因是：普通对象没有Symbol.iterator属性，如果一个对象拥有Symbol.iterator属性，那么就可以使用for...of遍历
// 下面的例子摘自 阮一峰老师的ES6入门第三版
let obj = {
data: [ 'hello', 'world' ],
[Symbol.iterator]() {
const self = this;
let index = 0;
return {
next() {
if (index < self.data.length) {
return {
value: self.data[index++],
done: false
};
} else {
return { value: undefined, done: true };
}
}
};
}
}
for (let value of obj) {
console.log(value)
} // hello world
// 类似数组的对象遍历 直接引用Array.prototype[Symbol.iterator]
// 普通对象部署数组的Symbol.iterator方法，并无效果
let iterable = {
0: 'a',
1: 'b',
2: 'c',
length: 3,
[Symbol.iterator]: Array.prototype[Symbol.iterator]
};
for (let item of iterable) {
console.log(item); // 'a', 'b', 'c'
}
