ES12 中的 Object.fromEntries 解决对象转化问题-JavaScript中文网-JavaScript教程资源分享门户

ES12 中的 Object.fromEntries 解决对象转化问题

在前端开发中，经常需要对对象做转化操作。但是，JavaScript 中原生的对象转化方法比较有限，不够直观和方便。ES12 中新增了 Object.fromEntries 方法，提供一种简单有效的对象转化方案。

Object.fromEntries 的基本用法

Object.fromEntries 是一个静态方法，可以将由键值对数组构成的输入对象转化为一个新对象。

比如，我们有如下数组：

const keyValuePairs = [ ['key1', 'value1'], ['key2', 'value2'], ['key3', 'value3'] ];

调用 Object.fromEntries 方法，可以将它转化为对象：

const obj = Object.fromEntries(keyValuePairs);

转化后的对象如下：

{
  key1: 'value1',
  key2: 'value2',
  key3: 'value3'
}

我们可以使用简单直观的方式，将数组数据快速转化为对象。

指导意义

Object.fromEntries 为 JavaScript 开发者提供了更加便利和灵活的对象转化方案。它避免了传统对象转化方法的冗长和复杂，提高了代码执行效率和开发效率。

此外，在大型项目开发中，Object.fromEntries 更加适用于处理大量数据。使用 Object.fromEntries 代码简洁可读性高，有助于降低开发成本和维护难度。

应用场景

Object.fromEntries 方法可以用于各种对象转化场景，尤其在数据处理中更为常见。

以下是一些应用场景：

将 Map 转化为对象

我们在开发中很常使用 Map 类型数据，但是它不太适合前端实际开发中的数据结构。这时我们可以使用 Object.fromEntries 方法将 Map 转化为对象：

const map = new Map([ ['key1', 'value1'], ['key2', 'value2'], ['key3', 'value3'] ]);
const obj = Object.fromEntries(map);

将 FormData 转化为对象

FormData 可以将表单数据一起发送到服务器端，但是默认 FormData 的数据格式是键值对，通过 Object.fromEntries 可以将 FormData 转化为对象：

const formData = new FormData(form);
const obj = Object.fromEntries(formData);

将 URLSearchParams 转化为对象

在实际开发中，我们通常需要对 URL 操作，URLSearchParams 是以键值对方式操作 URL 的方法。这时我们可以使用 Object.fromEntries 方法将 URLSearchParams 转化为对象：

const params = new URLSearchParams('x=1&y=2&z=3');
const obj = Object.fromEntries(params);

示例代码

下面是示例代码，提供 Object.fromEntries 方法的应用实例。

将数组转化为对象

const keyValuePairs = [ ['name', 'Tom'], ['age', 28], ['address', 'Shanghai'] ];
const obj = Object.fromEntries(keyValuePairs);
console.log(obj); //{name: "Tom", age: 28, address: "Shanghai"}

将 Map 转化为对象

const map = new Map([ ['name', 'Tom'], ['age', 28], ['address', 'Shanghai'] ]);
const obj = Object.fromEntries(map);
console.log(obj); //{name: "Tom", age: 28, address: "Shanghai"}

将 FormData 转化为对象

const formData = new FormData(document.querySelector('form'));
const obj = Object.fromEntries(formData);
console.log(obj); //{name: "Tom", age: 28, address: "Shanghai"}

将 URLSearchParams 转化为对象

const params = new URLSearchParams('name=Tom&age=28&address=Shanghai');
const obj = Object.fromEntries(params);
console.log(obj); //{name: "Tom", age: "28", address: "Shanghai"}

总结

Object.fromEntries 是 ES12 新增的一个非常实用的对象转化方法，它可以快速将键值对数组转化为对象，简化了开发者的代码实现。Object.fromEntries 代码简单直观，易于阅读和维护，是 JavaScript 开发者的必备工具。

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