Object.fromEntries和Object.entries的使用


本文摘自PHP中文网,作者hzc,侵删。

object.entries() 转换一个object为array。但是,如果你想做相反的事情怎么办?不用再想了! 使用 Object.fromEntries() 来把array转换为object。

1

2

3

4

5

6

const keyValuePair = [

  ['cow', 'val1'],

  ['pig', 'val2'],

];

Object.fromEntries(keyValuePair);

// { cow: 'val1', pig: 'val2' }

Object.fromEntries

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

1

2

3

const object = {

  key: 'value',

};

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

满足这些要求的参数有两种:

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

用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转为对象

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

让我们创建新的Map对象

1

2

3

4

5

6

7

8

9

10

11

// 使用构造函数

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 时,请小心,所有这些都会抛出一个错误

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

58f1f4a246699e60d6c95cabacb63d7.png

确保只传递键值对

Object.fromEntries vs Object.entries

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

1

2

3

4

5

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

const array = Object.entries(object);

// [ ["key1", "value1"], ["key2", "value2"] ]

Object.fromEntries(array);

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

Object到Object的转换

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

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

1

2

3

4

5

6

const food = { meat: 'v1', broccoli: 'v2', carrot: 'v3' };

// Stuck in Array land

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

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

);

// [ ["broccoli", "v2"], ["carrot", "v3"] ]

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

1

2

3

4

5

6

const food = { meat: 'v1', broccoli: 'v2', carrot: 'v3' };

// Yay, still in Object land

const vegetarian = Object.fromEntries(

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

);

// { broccoli: 'v2', carrot: 'v3' }

浏览器支持

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

340e9f29cceebbd48f1e844e0d0e478.png

推荐教程:《JS教程》

以上就是Object.fromEntries和Object.entries的使用的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

javascript中数组元素是什么

ie如何关闭javascript脚本

javascript是什么

text/javascript有什么用

javascript数组如何转为string

认识javascript是如何工作的,深入v8引擎和编写优化代码

javascript怎么查询数组长度

javascript加密方法有哪些

javascript常用属性方法有哪些

如何理解javascript中的原型链

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




打赏

取消

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

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

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

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

评论

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