深入浅出 ES9 新特性之 Object.fromEntries()

在 ES9 中，Object 对象新增了一个非常实用的方法 Object.fromEntries()，它用于将数组转换成对象。在处理数据时，经常会遇到需要将数组转换成对象的情况，例如从后端返回的数据是数组类型的，但是前端需要一个对象。使用 Object.fromEntries() 可以非常方便地完成这个任务。

一、Object.fromEntries() 格式

Object.fromEntries() 接收一个数组作为参数，数组成员是键值对数组。

Object.fromEntries(array)

• array：需要转换成对象的数组。

二、示例代码

示例一：基础使用

下面是一个基础的示例，将数组转换成对象：

const arr = [['name', 'Tom'], ['age', 20], ['gender', 'male']]
const obj = Object.fromEntries(arr)
console.log(obj) // {name: "Tom", age: 20, gender: "male"}

示例二：合并多个对象

使用 Object.fromEntries() 还可以合并多个对象：

const obj1 = {name: 'Tom', age: 20}
const obj2 = {gender: 'male', height: 175}
const obj3 = {birthday: '1999-10-1'}
const arr = [Object.entries(obj1), Object.entries(obj2), Object.entries(obj3)]
const obj = Object.fromEntries(arr.flat())
console.log(obj) // {name: "Tom", age: 20, gender: "male", height: 175, birthday: "1999-10-1"}

需要注意的是，Array.flat() 是 ES10 的新特性，如果浏览器版本不支持，可以使用 Array.concat() 进行合并。

示例三：过滤

如果数组中包含无效的键值对，可以使用数组的 filter() 方法过滤掉：

const arr = [['name', 'Tom'], ['age', 20], ['gender'], [], ['gender', 'male']]
const obj = Object.fromEntries(arr.filter(item => item.length === 2))
console.log(obj) // {name: "Tom", age: 20, gender: "male"}

三、兼容性

由于 Object.fromEntries() 是 ES9 新增的方法，在一些老的浏览器中不支持，需要进行兼容性处理。可以使用一些较为流行的打包工具，在打包时引入 polyfill 库，例如 babel、webpack 等。

四、总结

Object.fromEntries() 是 ES9 新增的方法，用于将数组转换成对象，非常实用。使用它可以非常方便地处理一些数据。需要注意的是，由于它是 ES9 新特性，在一些老的浏览器中不支持，需要进行兼容性处理。

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