for...in、for...of、迭代器浅析

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

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

天生实现迭代器Symbol.iterator的对象有：

数组

字符串

Map

Set

Object则没有。

Symbol.iterator小案例

只有实现了迭代器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 语法区别

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

共同点：

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

不通点：

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

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

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