JavaScript中你不知道的Object.entries用法

 更新时间:2021年10月09日 11:18:53   作者:GreenTea  
大家应该都知道,Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for...in 循环遍历该对象时返回的顺序一致,这篇文章主要给大家介绍了关于JavaScript中你不知道的Object.entries用法的相关资料,需要的朋友可以参考下

前言

平时我们经常会用到 Object 类上的静态方法,例如 Object.keys 、Object.values 、Object.assign 等等,但可能很少用到 Object.entries 这个方法,这篇文章就来讲解 Object.entries 方法的两个小技巧。

作用

Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for…in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环也枚举原型链中的属性)。

示例

const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

// array like object
const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]

// array like object with random key ordering
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]

// getFoo is property which isn't enumerable
const myObj = Object.create({}, { getFoo: { value() { return this.foo; } } });
myObj.foo = 'bar';
console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ]

// non-object argument will be coerced to an object
console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]

// iterate through key-value gracefully
const obj = { a: 5, b: 7, c: 9 };
for (const [key, value] of Object.entries(obj)) {
  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
}

// Or, using array extras
Object.entries(obj).forEach(([key, value]) => {
console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"

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 是两个相反的操作

总结

到此这篇关于JavaScript中你不知道的Object.entries用法的文章就介绍到这了,更多相关js Object.entries用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

参考

相关文章

  • 给超链接添加特效鼠标移动展示提示信息且随鼠标移动

    给超链接添加特效鼠标移动展示提示信息且随鼠标移动

    需要实现这样的效果,就是给超链接添加特效当鼠标移动到上展示提示信息且提示信息跟随鼠标移动,经测试还不错,感兴趣的朋友可以参考下
    2013-10-10
  • 浅析JS中的原型,原型链和继承

    浅析JS中的原型,原型链和继承

    经典模式和圣杯模式都是用于解决构造函数继承和原型继承的问题,但它们在实现继承的方式上有所不同,本文主要来和大家聊聊经典模式和圣杯模式下原型,原型链和继承的实现,需要的可以参考下
    2023-09-09
  • 如何利用Javascript生成平滑曲线详解

    如何利用Javascript生成平滑曲线详解

    相信大家都遇到过,在各种图表框架中经常会有将一段折线平滑的需求,不仅能给用户带来一种柔和的感觉,还能美化界面,让折线看起来没那么生硬,这篇文章主要给大家介绍了关于如何利用Javascript生成平滑曲线的相关资料,需要的朋友可以参考下
    2021-07-07
  • JS加密插件CryptoJS实现AES加密操作示例

    JS加密插件CryptoJS实现AES加密操作示例

    这篇文章主要介绍了JS加密插件CryptoJS实现AES加密操作,结合实例形式分析了CryptoJS插件的具体设置与AES加密操作实现技巧,需要的朋友可以参考下
    2018-08-08
  • gulp-htmlmin压缩html的gulp插件实例代码

    gulp-htmlmin压缩html的gulp插件实例代码

    这篇文章主要介绍了gulp-htmlmin压缩html的gulp插件实例代码的相关资料,需要的朋友可以参考下
    2016-06-06
  • Moment.js常见用法总结

    Moment.js常见用法总结

    这篇文章主要介绍了Moment.js常见用法总结,需要的朋友可以参考下
    2022-05-05
  • 关于layui flow loading占位图的实现方法

    关于layui flow loading占位图的实现方法

    今天小编就为大家分享一篇关于layui flow loading占位图的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • html中table数据排序的js代码

    html中table数据排序的js代码

    最近应项目要求,需要对table中的数据进行升序或降序排列,于是研究了一下js,希望对大家有帮助。
    2011-08-08
  • javascript实现倒计时N秒后网页自动跳转代码

    javascript实现倒计时N秒后网页自动跳转代码

    这篇文章主要介绍了javascript实现倒计时N秒后网页自动跳转代码,非常的实用,这里推荐给大家。
    2014-12-12
  • 动态加载js、css的实例代码

    动态加载js、css的实例代码

    这篇文章主要介绍了动态加载js、css的实例代码的相关资料,非常不错具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-05-05

最新评论