ES9 中 Object.fromEntries() 方法的使用技巧

ES9 中新增的 Object.fromEntries() 方法可以将一个键值对数组转换为一个对象。这个方法可以方便地将数组转换成对象，而无需使用循环语句和对象字面量的方式手动创建对象。在前端开发中，我们经常需要将一些数据转换成对象，这个方法可以大大简化我们的代码。

语法

Object.fromEntries(iterable)

• iterable：一个可迭代的键值对数组，每个元素都是一个长度为 2 的数组，第一个元素表示键，第二个元素表示值。

示例代码

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

使用技巧

将 Map 转换成对象

在实际开发中，我们可能会遇到需要把 Map 转换成对象的情况。Map 是一种常见的数据结构，它可以存储任意类型的键和值，但是在某些场景下，我们需要将其转换成对象。这个时候，我们可以使用 Object.fromEntries() 方法来实现：

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

将 FormData 转换成对象

在前端开发中，我们经常需要使用 FormData 对象来上传文件或者提交表单数据。但是在某些场景下，我们需要将 FormData 转换成对象。这个时候，我们可以使用 Object.fromEntries() 方法来实现：

const formData = new FormData();
formData.append('name', 'Tom');
formData.append('age', 18);
formData.append('gender', 'male');
const obj = Object.fromEntries(formData);
console.log(obj); // {name: "Tom", age: 18, gender: "male"}

将 URLSearchParams 转换成对象

在前端开发中，我们经常需要使用 URLSearchParams 对象来处理 URL 查询参数。但是在某些场景下，我们需要将 URLSearchParams 转换成对象。这个时候，我们可以使用 Object.fromEntries() 方法来实现：

const searchParams = new URLSearchParams('name=Tom&age=18&gender=male');
const obj = Object.fromEntries(searchParams);
console.log(obj); // {name: "Tom", age: "18", gender: "male"}

需要注意的是，URLSearchParams 转换成的对象中，所有的值都是字符串类型。

总结

Object.fromEntries() 方法可以方便地将一个键值对数组转换为一个对象，这个方法可以大大简化我们的代码。在实际开发中，我们可以使用它来将 Map、FormData 或者 URLSearchParams 转换成对象。需要注意的是，URLSearchParams 转换成的对象中，所有的值都是字符串类型。

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