Javascript迭代器

我们都知道可以用 for…of… 来循环可迭代对象，例如循环

Array;
Arguments;
Map;
Set;
String;
TypedArray;
NodeList;

迭代器的工作原理

创建一个指针，指向当前数据结构的起始位置
第一次调用对象next方法，指针自动指向数据结构的第一个成员
接下来不断调用next，指针一直往后移动，直到指向最后一个成员
每调用一次next方法返回一个包含value和done属性的对象

为什么Object不可以被迭代

let arr = [1, 2, 3];
let obj = {
  a: 1,
  b: 2,
  c: 3,
};
for (let val of arr) {
  console.log(val);
}
for (let val of obj) {
  console.log(val);
}

接着运行上面的代码，会出现以下报错信息：

Javascript迭代器

可以看到，数组正常循环没有问题，但是到了obj，会报：obj is not iterable（obj不是一个可迭代对象、obj不可被迭代）

这是为什么呢？将arr和obj分别使用 console.dir() 进行打印查看

Javascript迭代器

可以看到，arr的原型上挂载着一个 Symbol[Symbol.iterator]，而obj的原型上并没有这个属性，因此这就是为什么obj不可以被迭代的原因

但是如果非得让obj也成为一个可迭代对象，如何去实现呢？此时就需要给obj身上加上一个迭代器

let obj = {
  a: 1,
  b: 2,
  c: 3,
  [Symbol.iterator]: function () {
    let values = Object.values(obj);
    let index = 0;
    /* 必须得return 一个对象出去 */
    return {
      /* 这是固定写法 */
      next() {
        if (index >= values.length) {
          return {
            done: true, // 此时迭代结束，就不需要再return value出去
          };
        } else {
          return {
            value: values[index++],
            done: false,
          };
        }
      },
    };
  },
};
for (let item of obj) {
  console.log(item);
}

运行上方的代码，此时obj已经可以使用 for…of… 进行循环，并且此时的obj已经是一个可迭代对象

迭代器利用for of 自定义遍历数据

let obj = {
  a: 1,
  b: 2,
  c: ["小韩", "小徐", "小悦"],
  [Symbol.iterator]: function () {
    let idx = 0;
    const _c = this.c;
    return {
      next() {
        return idx < _c.length ? { value: _c[idx++], done: false } : { value: undefined, done: true };
      },
    };
  },
};
let values = obj[Symbol.iterator]();
console.log(values); // 得到迭代器对象，里面含有next方法
console.log(values.next()); // done:false(表示可以继续迭代)，并且value为 小韩
console.log(values.next()); // done:false(表示可以继续迭代)，并且value为 小徐
console.log(values.next()); // done:false(表示可以继续迭代)，并且value为 小悦
console.log(values.next()); // done:true(表示迭代结束)