JS 可迭代对象

要点速览

迭代器：有 next() 方法，每次调用返回 {value,done}结构的对象

可迭代对象：有 [Symbol.iterator]() 方法，返回迭代器

普通对象变可迭代：给它加 [Symbol.iterator] 方法

for of 可以直接遍历可迭代对象

拓展

// 什么是迭代器？
迭代器（Iterator）：一个有 next () 方法的对象，每次调用返回 { value: 值, done: 是否结束 } 的对象
const 迭代器 = { // 固定写法
  next() {
    return { value: 某个值, done: true/false }
  }
}

const iterator = { // 示例
  i: 0,
  next() {
    if (this.i < 3) {
      return { value: this.i++, done: false };
    }
    return { value: undefined, done: true };
  }
};

console.log(iterator.next()); // {value:0,done:false}
console.log(iterator.next()); // {value:1,done:false}
console.log(iterator.next()); // {value:2,done:false}
console.log(iterator.next()); // {value:undefined,done:true}

// 什么是可迭代对象？
对象拥有 [Symbol.iterator] 方法，且返回迭代器

// JS 自带的可迭代对象有哪些？
数组 Array
字符串 String
Map / Set
arguments
NodeList

// 可迭代对象的遍历
可以使用 for of 遍历： for (let v of 可迭代对象) {}
普通对象 默认不能用 for...of：

// 怎么把一个普通对象变成可迭代对象 iterable object？
    // 方法一：给对象添加 [Symbol.iterator] 方法，index 索引判断
    const obj = { a: 1, b: 2, c: 3 };
    obj[Symbol.iterator] = function () {
      const keys = Object.keys(this);
      let index = 0;

      // 返回迭代器
      return {
        next: () => {
          if (index < keys.length) {
            const key = keys[index];
            index++;
            return { value: this[key], done: false };
          }
          return { done: true };
        }
      };
    };

    // 方式二：给对象添加 [Symbol.iterator] 方法，用生成器 function* 函数
    obj[Symbol.iterator] = function* () {
      for (let key in this) {
        yield this[key];
      }
    };