让你的JS对象也能for...of在 Javascript 中，可遍历结构，比如 Array、NodeList、 Set

背景

在 Javascript 中，可遍历结构，比如 Array、NodeList、 Set、Map，都是默认具备遍历器（Iterator）接口的，这让它们都可以被 for...of 语法所接受。但 Object 并没有原生部署遍历器接口，所以如果你想用 for...of 来遍历一个对象，就会发现它报错了。

const a = {
  a: 1,
  b: '2',
  c: true,
  d() {},
}

for (var item of a) {
  console.log(item);
}
/**
 * Uncaught TypeError: a is not iterable
 */

enable-iterate

平时开发过程中，我们还是很经常会对一些对象做遍历的，所以能不能让它也支持 for...of 操作呢？答案是可以的，只需要简单地给它部署一下遍历器接口就行。

关于遍历器接口的机制和原理我就不细讲了，详细请看阮一峰老师的经典ES6教程 Iterator 和 for...of 循环。这里我只是基于 rollup，简单地封装了个 npm 包 enable-iterate，可以简便地让你的 JS 对象支持 for...of 遍历，有需要的可以自行取用。

用法很简单，首先先安装一下 npm 包：

npm install enable-iterate

然后，给你需要执行 for...of 遍历的 JS 对象，用 enableIterate 包装一下：

import enableIterate from 'enable-iterate';
 
const a = enableIterate({
  a: 1,
  b: '2',
  c: true,
  d() {},
})

没错就是这么简单，试试效果：

for (var item of a) {
  console.log(item);
}
/**
 * 1
 * 2
 * true
 * [Function: d]
 */

如果你觉得每次要给 JS 对象使用 for...of 遍历都要这么包装一下还是很麻烦的话，还有个一劳永逸的办法：

enableIterate(Object.prototype);

当然了我不知道有没有其他坑，反正目前挺香的。

最后

npm 包 github 地址：github.com/deqwin/enab…，欢迎 issue

引用

Iterator 和 for...of 循环