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

• for...in
• for...of

介绍下迭代器

迭代器的本质就是一个拥有 next 方法的对象，用 next 方法来移动指针。

next 方法返回一个对象，value 属性值表示返回的值，done 属性值表示是否还要移动指针。

天生实现迭代器 Symbol.iterator 的对象有数组、字符串、Map、Set。

Object 则没有。

部署了迭代器的数据，可以用 for...of 遍历。

只有实现了迭代器 Symbol.iterator 的对象才能使用 for...of 语法。

可以手动给对象自定义一个迭代器，比如：

const 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) {
  // hello, world
  console.log(value);
}

for...of

for...in

注意，for...in 不会遍历 symbol 类型的属性。

for..fof 和 for...in 语法区别

从字面意思上理解，属性在对象上，也可能不在对象上，in 有在...里的意思，所以 for...in 表示遍历对象的属性名，而不是属性值。xxxObj 的 xx 属性值是 xx，一般说属性值都要说是哪个属性的属性值，而 of 有什么什么的意思，所以 for...of 表示遍历对象的属性值。

共同点：

都可以用 break 关键字跳出循环

不同点：

for...in 遍历的是属性名，for...of 遍历的是属性值

for...in 会遍历原型，for...of 不会

for...in 不需要实现迭代器，for...of 需要实现迭代器