在 JavaScript 中，对象是一种非常常见的数据结构，我们可以通过对象来存储和操作数据。在 ES10 中，新增了一个 Object.fromEntries 方法，可以方便地将键值对数组转化为对象，提升了 JavaScript 对象处理能力。在本文中，我们将学习 Object.fromEntries 方法的原理、用法以及示例，希望可以为您的前端开发提供帮助。
Object.fromEntries 方法的原理
Object.fromEntries 方法接收一个键值对数组作为参数，并返回一个由这些数组组成的对象。该方法的语法如下：
Object.fromEntries(iterable)
其中，iterable 表示一个可迭代对象，其中的每个元素都是一个长度为 2 的数组，第一个元素表示键名，第二个元素表示键值。
Object.fromEntries 方法的原理是循环遍历数组，将数组中每个元素的第一个元素作为键名，第二个元素作为键值，最终组成一个新的对象。如果有重复的键名，后面的键值会覆盖前面的键值。
Object.fromEntries 方法的用法
Object.fromEntries 方法的用法非常简单，只需要传入一个键值对数组即可。下面是一个示例：
const entries = [ ['name', '张三'], ['age', 18], ['gender', '男'], ]; const obj = Object.fromEntries(entries); console.log(obj);
输出结果为：
{
name: '张三',
age: 18,
gender: '男',
}在实际应用中，Object.fromEntries 方法可以帮助我们将数组转化为对象，尤其是在处理一些数据接口返回的数据时，可以方便地将返回的数组转化为对象以便更好地操作数据。
Object.fromEntries 方法的示例
将 FormData 转化为 JSON 对象
在实际开发中，我们经常需要上传表单数据，并将表单数据转化为 JSON 对象来进行处理。这时，我们可以使用 FormData 对象来收集表单数据，Object.fromEntries 方法来将 FormData 转化为 JSON 对象。下面是一个示例：
-- -------------------- ---- ------- ----- ------------ ------ ----------- ----------- ----------- ------ ----------- ---------- ----------- ------ ----------- ------------- ---------- ------- ------------- ------------------------------------ ------- -------- -------- -------------- - ----- ---- - ---------------------------------- ----- -------- - --- --------------- ----- ------- - ------------------------------- ----- --- - ---------------------------- ----------------- - ---------
在点击提交按钮时，会将表单数据转化为 JSON 对象并输出到控制台。输出结果为：
{
name: '张三',
age: 18,
gender: '男',
}将 Map 转化为对象
在 JavaScript 中，Map 是一种比较常见的数据结构，用来存储键值对。下面是一个将 Map 转化为对象的示例：
const map = new Map([ ['name', '张三'], ['age', 18], ['gender', '男'], ]); const obj = Object.fromEntries(map); console.log(obj);
输出结果为：
{
name: '张三',
age: 18,
gender: '男',
}将对象的键名和键值互换
有时候我们需要将对象的键名和键值互换，这时，可以使用 Object.entries 方法将对象转化为键值对数组，再使用 Array.prototype.map 方法将每个元素的键名和键值互换，最后使用 Object.fromEntries 方法将数组转化为对象。下面是一个示例：
-- -------------------- ---- ------- ----- --- - - ----- ----- ---- --- ------- ---- -- ----- ------- - ------------------------------ ------- -- ------- ------ ----- ------ - ---------------------------- --------------------
输出结果为：
{
张三: 'name',
18: 'age',
男: 'gender',
}总结
本文介绍了 ES10 中的 Object.fromEntries 方法的原理、用法以及示例。Object.fromEntries 方法可以方便地将键值对数组转化为对象，并且可以帮助我们在处理数据接口返回的数据时更方便地操作数据。在实际开发中，我们可以根据具体的业务场景，灵活地运用 Object.fromEntries 方法，提升 JavaScript 对象处理能力，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6462ea49968c7c53b03f87c8