乐趣区

关于前端:ES10-中-ObjectfromEntries-怎么用

jiezi

作者：Shadeed
译者：前端小智
起源：dmitripavlutin

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

咱们晓得 Object.entries() 是将对象转成一个本身可枚举属性的键值对数组。同样，咱们也能够把 键值对数组 转成了对象。

const keyValuePair = [['cow', '?'],
  ['pig', '?'],
]

Object.fromEntries(keyValuePair);
// {cow: '?', pig: '?'}

Object.fromEntries

咱们晓得，对象构造是一个是有键和值组合体，如下所示：

const object = {key: 'value',};

基于这个逻辑，如果咱们想将某个货色转成对象，就必须要传递 键和值。

有两种类型的参数能够满足这些要求：

  1. 具备嵌套键值对的数组
  2. Map 对象

应用 Object.fromEntries 将数组转成对象

上面是个键 - 值对嵌套数组

const nestedArray = [['key 1', 'value 1'],
  ['key 2', 'value 2']
]

应用 Object.fromEntries 能够将该数组转成对象:

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

应用 Object.fromEntries 将 Map 转成对象

ES6 为咱们带来了一个名为 map 的新对象，它与对象十分类似。

TC39：映射对象是键 / 值对的汇合，其中键和值都能够是任意 ECMAScript 语言值。

咱们来创立一个 Map 对象：

// 应用构造函数
const map = new Map([['key 1', 'value 1'],
  ['key 2', 'value 2']
])

// 或者咱们能够应用实例办法“set”const map = new Map()
map.set('key 1', 'value 1')
map.set('key 2', 'value 2')

// 后果
Map(2) {"key 1" => "value 1", "key 2" => "value 2"}

让咱们应用 Object.fromentries 将 map 转换为一个对象

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

对象的类型谬误：试图应用 Object.fromEntries 将 其它类型 转成对象

将上面的类型传入 Object.fromEntries 都会导致报错 caught TypeError。

确保传递值要有键 - 值对。

大家都说简历没我的项目写，我就帮大家找了一个我的项目，还附赠【搭建教程】。

Object.fromEntries vs Object.entries

Object.fromEntries 是 Object.entries 反向。Object.entries()办法返回一个给定对象本身可枚举属性的键值对数组，而Object.fromEntries() 办法把键值对列表转换为一个对象。

const object = {key1: 'value1', key2: 'value2'}

const array = Object.entries(object)
// [["key1", "value1"], ["key2", "value2"] ]


Object.fromEntries(array)
// {key1: 'value1', key2: 'value2'}

对象到对象的转换

如果你浏览了 TC39 提案，这就是引入此新办法的起因。随着 Object.entries 的引入之前，要将一些非对象构造转成对象是比拟麻烦的。

通常，当咱们抉择应用Object.entries，是因为它使咱们可能拜访许多丑陋的数组办法，例如filter。然而在实现转换之后，咱们有点被该数组所困扰。

const food = {meat: '?', broccoli: '?', carrot: '?'}

// ? 卡在这后果上...
const vegetarian = Object.entries(food).filter(([key, value]) => key !== 'meat',
)
// [["broccoli", "?"], ["carrot", "?"] ]

好吧！咱们能够利用所有这些有用的数组办法，但依然能够返回对象。最初，从对象到对象的转换?

const food = {meat: '?', broccoli: '?', carrot: '?'}

const vegetarian = Object.fromEntries(Object.entries(food).filter(([key, value]) => key !== 'meat'),
)

// {broccoli: '?', carrot: '?'}

数组转成对象的代替计划

Object.fromEntries是 ES10 推出来，很新，可能浏览器反对度还够敌对。因而，让咱们看一下如果将具备键值对构造的数组转成对象。

应用 reduce 办法将数组转成对象

将数组转换为对象的一种风行办法是应用reduce。

const array = [['key1', 'value1'],
  ['key2', 'value2']
]

const map = new Map([['key1', 'value1'],
  ['key2', 'value2']
])

function toObject(pairs) {return Array.from(pairs).reduce((acc, [key, value]) => Object.assign(acc, { [key]: value}),
    {})
}


// 后果
// {key1: 'value1', key2: 'value2'}

应用 库 将数组转成对象

Lodash 也提供了将键值对转换为对象的办法。

_.object

将数组转换为对象。传递 [key, value] 对的单个列表，或键的列表和值的列表。

const array = [['key1', 'value1'],
  ['key2', 'value2']
]

_.object(array)
// {key1: 'value1', key2: 'value2'}
_.fromPairs

_.fromPairs 是 _.toPairs 的反向，它的办法返回一个由键值对组成的对象。

const array = [['key1', 'value1'],
  ['key2', 'value2'],
]

_.fromPairs(array)
// {key1: 'value1', key2: 'value2'}

浏览器反对状况

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://medium.com/@samantham…

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588… 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

退出移动版