深入浅析ES10中的Object.fromEntries()

PHP中文网 JavaScript

本文摘自PHP中文网，作者青灯夜游，侵删。

本篇文章带大家详细了解一下ES10中的Object.fromEntries()。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

我们知道 Object.entries() 是将对象转成一个自身可枚举属性的键值对数组。同样，我们也可以把键值对数组转成了对象。

1

2

3

4

5

6

7

const keyValuePair = [

  ['cow', '?'],

  ['pig', '?'],

]

 

Object.fromEntries(keyValuePair);

// { cow: '?', pig: '?' }

Object.fromEntries

我们知道，对象结构是一个是有键和值组合体，如下所示：

1

2

3

const object = {

  key: 'value',

};

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

有两种类型的参数可以满足这些要求：

  • 具有嵌套键值对的数组

  • Map 对象

【推荐学习：javascript高级教程】

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

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

1

2

3

4

const nestedArray = [

  ['key 1', 'value 1'],

  ['key 2', 'value 2']

]

使用Object.fromEntries可以将该数组转成对象:

1

2

Object.fromEntries(nestedArray);

// { key 1: "value 1", key 2: "value 2"}

使用 Object.fromEntries 将 Map 转成对象

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

TC39：映射对象是键/值对的集合，其中键和值都可以是任意 ECMAScript 语言值。

我们来创建一个 Map 对象：

1

2

3

4

5

6

7

8

9

10

11

12

13

// 使用构造函数

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 转换为一个对象

1

2

Object.fromEntries(map);

// { key 1: "value 1", key 2: "value 2"}

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

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

1.png

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

Object.fromEntries vs Object.entries

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

1

2

3

4

5

6

7

8

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。 但是在完成转换之后，我们有点被该数组所困扰。

1

2

3

4

5

6

7

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

 

// ? 卡在这结果上...

const vegetarian = Object.entries(food).filter(

  ([key, value]) => key !== 'meat',

)

// [ ["broccoli", "?"], ["carrot", "?"] ]

好吧！ 我们可以利用所有这些有用的数组方法，但仍然可以返回对象。 最后，从对象到对象的转换?

1

2

3

4

5

6

7

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

 

const vegetarian = Object.fromEntries(

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

)

 

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

数组转成对象的替代方案

Object.fromEntries是 ES10 推出来，很新，可能浏览器支持度还够友好。 因此，让我们看一下如果将具有键值对结构的数组转成对象。

使用 reduce 方法将数组转成对象

将数组转换为对象的一种流行方法是使用reduce。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

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]对的单个列表，或键的列表和值的列表。

1

2

3

4

5

6

7

const array = [

  ['key1', 'value1'],

  ['key2', 'value2']

]

 

_.object(array)

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

_.fromPairs

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

1

2

3

4

5

6

7

const array = [

  ['key1', 'value1'],

  ['key2', 'value2'],

]

 

_.fromPairs(array)

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

浏览器支持情况

2.png

原文地址：https://medium.com/@samanthaming/javascript-object-fromentries-4395660334d1

作者：Shadeed

更多编程相关知识，请访问：编程入门！！

以上就是深入浅析ES10中的Object.fromEntries()的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

通过示例来了解js reduce()方法的5个使用方法

javascript怎样验证手机号码

javascript中如何产生两个随机数

javascript跨域的解决方式总结（代码）

javascript如何改变文本内容

浏览器关闭javascript有哪些影响

多行文本进行截断的奇淫巧技

js中定义函数的几种方法

手把手带你弄懂javascript中的异步编程

javascript 没有类吗

更多相关阅读请进入《javascript》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...