你知道Object.entries(),但你还知道有Object.fromEntries()吗?

开发 前端
我们得到 object.entries(),它转换一个object → array。但是,如果您想做相反的事情怎么办?不用再想了! 使用 Object.fromEntries() 来array → object 。

我们得到 object.entries(),它转换一个object → array。但是,如果您想做相反的事情怎么办?不用再想了! 使用 Object.fromEntries() 来array → object 。

  1. const keyValuePair = [ 
  2.   ['cow', ''], 
  3.   ['pig', ''], 
  4. ]; 
  5. Object.fromEntries(keyValuePair); 
  6. // { cow: '', pig: '' } 

Object.fromEntries

我们先指出对象的解剖方法,对象是有一个键和一个值的东西。

  1. const object = { 
  2.   key: 'value', 
  3. }; 

如果我们想将某物转换为对象,我们需要传递具有这两个要求的东西:key 和 value。

  • 具有嵌套键值对的数组
  • Map对象

用Object.fromEntries将数组转为对象

这是带有键值对的嵌套数组

  1. const nestedArray = [ 
  2.   ['key 1', 'value 1'], 
  3.   ['key 2', 'value 2'], 
  4. ]; 

当我们将 Object.fromEntries 应用于它时,我们可以从中获取对象。

  1. Object.fromEntries(nestedArray); 
  2. // { key 1: "value 1", key 2: "value 2"} 

用Object.fromEntries将Map转为对象

JavaScript ES6为我们带来了一个名为map的新对象,它与对象非常相似。

让我们创建新的Map对象

  1. // 使用构造函数 
  2. const map = new Map([ 
  3.   ['key 1', 'value 1'], 
  4.   ['key 2', 'value 2'], 
  5. ]); 
  6. // 或者我们可以使用实例方法,"set" 
  7. const map = new Map(); 
  8. map.set('key 1', 'value 1'); 
  9. map.set('key 2', 'value 2'); 
  10. // 结果 
  11. // Map(2) {"key 1" => "value 1", "key 2" => "value 2"} 

现在,我们使用 Object.fromEntries 将Map转换为对象

  1. Object.fromEntries(map); 
  2. // { key 1: "value 1", key 2: "value 2"} 

Object.fromEntries与其他类型的类型错误

当你试图将其他数据类型传递到 Object.fromEntries 时,请小心,所有这些都会抛出一个错误

❌ 未捕获的类型错误(Uncaught TypeError)

你知道Object.entries(),但你还知道有Object.fromEntries()吗? 

确保只传递键值对。

Object.fromEntries vs Object.entries

Object.fromEntries 与 Object.entries 的效果相反。所以 Object. entries 将转换我们的数组并返回一个新的嵌套的键值对数组。而 Object.fromEntries 将把这个数组转回一个对象。

  1. const object = { key1: 'value1', key2: 'value2' }; 
  2. const array = Object.entries(object); 
  3. // [ ["key1", "value1"], ["key2", "value2"] ] 
  4. Object.fromEntries(array); 
  5. // { key1: 'value1', key2: 'value2' } 

Object到Object的转换

如果你阅读了原始的TC39提案,这就是引入此新方法的原因。随着 Object.entries 的引入,没有一种简单的方法可以将结果转换回对象。

通常,当我们选择使用 Object.entries 时,是因为它使我们可以访问许多漂亮的数组方法,例如 filter。但是在完成转换之后,我们有点被该数组所困扰。

  1. const food = { meat: '', broccoli: '', carrot: '' }; 
  2. //  Stuck in Array land 
  3. const vegetarian = Object.entries(food).filter( 
  4.   ([key, value]) => key !== 'meat', 
  5. ); 
  6. // [ ["broccoli", ""], ["carrot", ""] ] 

我们可以利用所有这些有用的数组方法,但仍然可以找回我们的对象,最后,从对象到对象的转换 。

  1. const food = { meat: '', broccoli: '', carrot: '' }; 
  2. //  Yay, still in Object land 
  3. const vegetarian = Object.fromEntries( 
  4.   Object.entries(food).filter(([key, value]) => key !== 'meat'), 
  5. ); 
  6. // { broccoli: '', carrot: '' } 

浏览器支持

除了Internet Explorer,大多数主流浏览器都支持此方法 。

你知道Object.entries(),但你还知道有Object.fromEntries()吗?

如果对你有所启发和帮助,可以点个关注、收藏、转发,也可以留言讨论,这是对作者的最大鼓励。

 

责任编辑:赵宁宁 来源: 今日头条
相关推荐

2020-06-24 08:27:36

ES数组对象

2022-07-05 08:34:22

虚拟机JavaJVM

2022-08-02 10:01:34

Import语句ES模块

2019-11-21 14:56:40

特殊文件Linux开发

2023-04-26 10:21:04

2023-01-31 09:02:24

JSVMVR

2016-01-04 11:03:53

手柄vr输入设备

2024-06-14 07:59:00

2018-01-25 21:32:24

Emoji表情iPhone

2019-07-04 05:22:02

物联网设备物联网IOT

2016-09-29 15:49:08

hadoop大数据领域

2010-11-23 10:21:53

跳槽

2018-01-10 08:27:00

2023-01-28 10:27:04

2023-04-26 10:06:08

RocketMQ属性Consumer

2020-03-23 08:31:13

网络时延时延网络

2022-09-14 08:11:06

分页模糊查询

2013-06-27 10:09:21

大数据

2022-06-01 07:10:43

递归字典极限

2010-09-17 16:16:05

无线接入技术
点赞
收藏

51CTO技术栈公众号