Object.entries() 与 Object.fromEntries() 方法应用

Object.fromEntries是内置JavaScript库的有用补充。在解释它的作用之前，有助于理解预先存在的Object.entries API;因此这篇文章将其罗列到一起。

Object.entries()

Object.entries()返回一个数组，其元素是与直接在object上找到的可枚举属性键值对相对应的数组。属性的顺序与通过手动循环对象的属性值所给出的顺序相同。

对于对象中的每个键值对，Object.entries给出一个数组，其中第一个元素是键，第二个元素是值。

语法

Object.entries(obj)

示例

const user = {
  userName: 'DeathGhost',
  age: 18,
  city: '西安',
  url: 'deathghost.cn',
}
console.log(Object.entries(user));

结果则是属性键与值相对应的数组

[Array(2), Array(2), Array(2), Array(2)]
0: (2) ["userName", "DeathGhost"]
1: (2) ["age", 15]
2: (2) ["city", "西安"]
3: (2) ["url", "deathghost.cn"]

Object.fromEntries()

Object.fromEntries() 方法接收一个键值对的列表参数，并返回一个带有这些键值对的新对象。这个迭代参数应该是一个能够实现@iterator方法的的对象，返回一个迭代器对象。它生成一个具有两个元素的类数组的对象，第一个元素是将用作属性键的值，第二个元素是与该属性键关联的值。

新Object.fromEntries API执行的反转Object.entries。这样可以根据条目轻松重建对象。

语法

Object.fromEntries(iterable);

示例

按上面示例，其user对象返回一个数组。

[["userName","DeathGhost"],["age",15],["city","西安"],["url","deathghost.cn"]]

Object.fromEntries(Object.entries(user))

通过Object.fromEntries()方法最终返回

{userName: "DeathGhost", age: 15, city: "西安", url: "deathghost.cn"}

通过示例结果， 可以看出 Object.fromEntries 是 Object.entries() 的反转函数。

👀 在使用 Object.fromEntries 需要注意的是其键的唯一性，否则会被丢失

如同：

age键重复，则会数据丢失，出现如下结果。

const user = {
  userName: 'DeathGhost',
  age: 18,
  age: 15,
  city: '西安',
  url: 'deathghost.cn',
}
// {userName: "DeathGhost", age: 15, city: "西安", url: "deathghost.cn"}