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

作者：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… 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。