如何让一个对象支持 for...of 遍历

首先 for...of 循环是在 JavaScript ES6 中引入的，它循环的机制是会向被访问对象请求一个迭代器对象，然后通过调用迭代器对象的 next() 方法来遍历所有返回值，我们知道 JavaScript 数组内置了迭代器对象，而普通的对象也没有的，所以如果我们想要使用 for...of 遍历对象就需要给对象添加一个可迭代的对象属性。

方法一：给对象本身增加迭代器

let obj = {
  a: 1,
  b: 2,
  c: 3,
};

Object.defineProperty(obj, Symbol.iterator, {
  enumerable: false,
  configurable: true,
  writable: false,
  value: function () {
    let _this = this;
    let keys = Object.keys(this)
    let index = 0;

    return {
      next() {
        return {
          value: _this[keys[index++]],
          done: index > keys.length,
        };
      },
    };
  }
});

方法二：给对象原型增加迭代器

let obj = {
  a: 1,
  b: 2,
  c: 3,
};

Object.prototype[Symbol.iterator] = function () {
  let _this = this;
  let keys = Object.keys(this)
  let index = 0;

  return {
    next() {
      return {
        value: _this[keys[index++]],
        done: index > keys.length,
      };
    },
  };
}