阅读 39

让你的JS对象也能for...of

背景

在 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 循环