在前端开发中，我们经常需要将不同形式的数据转换为 JavaScript 对象。在 ES2019 中，新加了一个非常实用的方法，即 Object.fromEntries()，它可以帮助我们将键值对数组转换为对象。本文将详细介绍 Object.fromEntries() 的用法及其在前端实践中的应用，并提供示例代码。
Object.fromEntries() 简介
Object.fromEntries() 方法可以接受一个由键值对组成的数组，然后将其转换为一个新的对象。该方法可以代替常规的 for 循环或 Array.reduce() 方法实现一个对象的创建。
语法：Object.fromEntries(iterable)
参数：iterable 为一个可迭代对象，其中每个元素都是一个键值对数组。
返回值：一个新的对象，其中包含可迭代对象中的所有键值对。
示例代码：
const entries = [['name', '张三'], ['age', 18], ['gender', '男']];
const obj = Object.fromEntries(entries);
console.log(obj); // { name: '张三', age: 18, gender: '男' }Object.fromEntries() 的应用
以下是 Object.fromEntries() 在前端开发中的几个常见应用场景。
将 URLSearchParams 对象转换为对象
URLSearchParams 是浏览器原生 API，用于处理 URL 中的查询字符串。该 API 返回的对象虽然可以通过 get()/getAll()/has()/set()/append()/delete() 等方法获取/操作查询字符串，但是其原生格式不便于直接使用。
我们可以使用 Object.fromEntries() 方法将 URLSearchParams 对象转换为普通的对象，方便进行操作。
示例代码：
const queryString = 'name=张三&age=18&gender=男';
const params = new URLSearchParams(queryString);
const obj = Object.fromEntries(params);
console.log(obj); // { name: '张三', age: '18', gender: '男' }将 Map 转换为对象
Map 是 ES6 中新增的集合类型，其中存储的数据为键值对。有时候我们需要将 Map 转换为普通的对象，以方便进行操作。
示例代码：
const map = new Map([['name', '张三'], ['age', 18], ['gender', '男']]);
const obj = Object.fromEntries(map);
console.log(obj); // { name: '张三', age: 18, gender: '男' }将数组对象转换为普通对象
有时候我们从后端获取数据时，返回的是一个数组对象，其中每个元素都是键值对数组。此时我们可以使用 Object.fromEntries() 方法将这个数组对象转换为普通的对象。
示例代码：
// javascriptcn.com 代码示例
const data = [
[['name', '张三'], ['age', 18], ['gender', '男']],
[['name', '李四'], ['age', 20], ['gender', '女']],
[['name', '王五'], ['age', 22], ['gender', '男']]
];
const obj = Object.fromEntries(data.map(item => new Map(item)));
console.log(obj);
/*
{
'1': { name: '张三', age: 18, gender: '男' },
'2': { name: '李四', age: 20, gender: '女' },
'3': { name: '王五', age: 22, gender: '男' }
}
*/总结
Object.fromEntries() 方法可以帮助我们将键值对数组快速转换为对象，是一个非常实用的方法。除了上述几个常见场景外，该方法还可以用于在原有对象基础上进行修改。在实际开发中，我们可以结合自己的业务场景，灵活使用该方法，提高代码的效率和可读性。
示例代码：
const obj = { name: '张三', age: 18, gender: '男' };
const newObj = Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, value + 1]));
console.log(newObj); // { name: '张三1', age: 19, gender: '男1' }希望本文对大家善用 Object.fromEntries() 方法有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653494ac7d4982a6eb960f62