我是加菲猫🐱,如果你喜欢我的文章,欢迎点赞分享哦
平时我们经常会用到 Object 类上的静态方法,例如 Object.keys 、Object.values 、Object.assign 等等,但可能很少用到 Object.entries 这个方法,这篇文章就来讲解 Object.entries 方法的两个小技巧。
1. 使用 for...of 遍历普通对象
很多初学前端的小伙伴可能都写过下面这个代码:
let obj = {
a: 1,
b: 2
}
for (let value of obj) {
// ...
}
但是运行一下就发现,哦吼,报错了:
Uncaught TypeError: obj is not iterable
于是乎,遍历普通对象就变成了清一色的 for...in 遍历。但由于 for...in 不光会遍历对象的自有属性,还会遍历到对象原型上,因此我们在使用的时候还需要加一个过滤,例如:
for (let key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
// ...
}
}
可以看到这样写很不优雅。之所以普通对象不能用 for...of 遍历,是因为普通对象没有实现 iterator 接口(关于 JS 的迭代器会专门写一篇文章讲解)。而 JS 数组是实现了 iterator 接口的,因此通过 Object.entries 得到的键值对数组就可以使用 for...of 遍历:
for (let [key, value] of Object.entries(obj)) {
// ...
}
Object.entries会返回对象自身可枚举属性的键值对数组,不包含原型上的属性
2. 普通对象与 Map 对象相互转换
看到项目中将普通对象转为 Map 对象,还在使用 for...in 遍历:
let obj = {
a: 1,
b: 2
}
let map = new Map();
for (let key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
map.set(key, obj[key]);
}
}
实际上 Map 构造器可以接受一个键值对数组初始化,这就意味着可以使用 Object.entries 将普通对象转为 Map 对象:
let map = new Map(Object.entries(obj));
那么 Map 对象如何转回普通对象呢?还使用遍历吗?不需要,可以使用 Object.fromEntries 静态方法来转换:
let obj = Object.fromEntries(map);
说到这里,很多小伙伴可能还是没搞清楚普通对象、键值对数组、Map 对象的转换关系,我用一张图总结一下:
Object.entries和Object.fromEntries是两个相反的操作