js的 for...in 和 for...of的用法

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

区别

1. for...in遍历key值，for...of遍历value值
2. 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'
}