ES10 的 Object.fromEntries 方法使用详解与示例

在 ES2019 中，为 Object 新增了一个方法：Object.fromEntries()。这个方法可以把一个键值对数组转换成一个对象。在某些场景下非常有用，本文将详细介绍 Object.fromEntries() 的使用方法以及示例，帮助前端开发者更好的掌握这个方法。

Object.fromEntries() 方法的使用方法

Object.fromEntries() 方法将一个键值对的列表转换为一个对象。它接收一个数组，该数组包含若干个键值对儿。每个键值对儿代表一个属性名和属性值，然后 Object.fromEntries() 将这些键值对儿转换成一个对象并返回。下面是 Object.fromEntries() 方法的使用方法：

Object.fromEntries(iterable);

其中 iterable 表示包含键值对儿的列表，可以是一个数组、可迭代对象或其他类数组对象，且每项应为数组。

下面是一个简单的例子，用 Object.fromEntries() 方法将数组转换为对象：

const arr = [ [1, 'a'], [2, 'b'], [3, 'c'] ];
const obj = Object.fromEntries(arr);
console.log(obj);
// 输出: {1: 'a', 2: 'b', 3: 'c'}

Object.fromEntries()方法的实现原理

Object.fromEntries() 方法其实就是将数组对象转换成一个对象。具体的转换方法是将数组中的每一个键值对依次重组成一个新的对象属性。

示例代码

为了更好的理解 Object.fromEntries() 方法，我们提供一些实用的示例代码如下。

1. 将 URL 查询字符串转换为对象

下面这个例子演示了如何将 URL 的查询字符串转换为对象。

const query = '?name=jack&age=22&gender=male';
const searchParams = new URLSearchParams(query);
const paramsObj = Object.fromEntries(searchParams.entries());
console.log(paramsObj);
// 输出: {name: "jack", age: "22", gender: "male"}

1. 对象的属性和值互换

下面这个例子演示了如何将对象的属性名和属性值进行互换：

const obj = { x: 1, y: 2, z: 3};
const newObj = Object.fromEntries(
  Object.entries(obj).map(([k, v]) => [v, k])
)
console.log(newObj);
// 输出: { '1': 'x', '2': 'y', '3': 'z' }

1. 获取对象中符合条件的值

下面这个例子演示了如何从对象中获取符合条件的键值对：

const obj = { x: 1, y: 2, z: 3};
const newObj = Object.fromEntries(
  Object.entries(obj).filter(([k, v]) => v > 1)
)
console.log(newObj);
// 输出: { y: 2, z: 3 }

结论

Object.fromEntries() 方法是一个非常有用的方法，可以将一个数组转换成一个对象。这个方法可以帮助前端开发者在一些场景中更加便捷地使用对象。希望本文对大家的学习有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ff72671b0bf82c71c9b5d1