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