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

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

Author: DeathGhost
Published: 2019-08-17 17:03:35
Category: javascript
Canonical: https://www.deathghost.cn/article/javascript/57
Keywords: JavaScript, ECMAScript, ES2019, ES10, Object.entries(), Object.fromEntries(), 方法, 对象, 数组, 转换

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

![ECMAScript,ES2019,entries,fromEntries](https://www.deathghost.cn/public/upload/article/2019/08/1566032485623.jpg)

ECMAScript,ES2019,entries,fromEntries

## 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"}

## Related

- Previous: [JavaScript flat 提取嵌套数组元素](https://www.deathghost.cn/article/javascript/56)
- Next: [JS原生的深拷贝API structuredClone()](https://www.deathghost.cn/article/javascript/120)