在 ES12 中使用 Object.fromEntries() 方法
随着 JavaScript 的发展，每一次新版本的推出都会带来新的特性和 API。其中 ES12（也被称为 ES2021）中新增的 Object.fromEntries() 方法尤其值得我们前端开发者关注和学习。
Object.fromEntries() 方法是一个用于将键值对数组转换为对象的静态方法。在 ES11 中，我们已经可以使用 Object.entries() 方法将对象转换为键值对数组，而 Object.fromEntries() 方法则提供了与之相反的功能。
下面让我们来详细介绍一下 Object.fromEntries() 方法，并探讨其在实际开发中的应用。
- Object.fromEntries() 方法的基本用法
Object.fromEntries() 方法接收一个键值对数组作为参数，返回一个由键值对数组转换而来的对象。
例如，我们有一个键值对数组 entries，如下所示：
const entries = [ ['name', '小明'], ['age', 18], ['gender', '男'] ];
我们可以使用 Object.fromEntries() 方法将其转换为一个对象：
const obj = Object.fromEntries(entries);
console.log(obj); // 输出 { name: '小明', age: 18, gender: '男' }- Object.fromEntries() 方法的高级用法
Object.fromEntries() 方法的第一个使用场景是在将键值对数组转换为对象的情况下。但这并不是它的唯一用途，它还可以用于一些高级的操作。
2.1. Map 转换为对象
前面提到了 Object.entries() 方法，该方法将对象转换为键值对数组。我们还可以使用 ES6 中引入的 Map 类型来存储一组键值对，并通过 Object.fromEntries() 方法将其转换为对象。
例如，我们有一个 Map 类型的数据 entries：
const entries = new Map([ ['name', '小明'], ['age', 18], ['gender', '男'] ]);
我们可以通过 Object.fromEntries() 方法将其转换为一个对象：
const obj = Object.fromEntries(entries);
console.log(obj); // 输出 { name: '小明', age: 18, gender: '男' }2.2. 对象属性的排序
在 JavaScript 中，对象属性的顺序是不固定的。但有时，我们希望对象属性按照一定的顺序排列，例如按照声明顺序或按照属性名的字典顺序排列。在这种情况下，我们可以将对象转换为键值对数组，按照一定的规则进行排序，然后再使用 Object.fromEntries() 方法将其转换为对象。
例如，我们有一个对象 obj：
const obj = {
name: '小明',
age: 18,
gender: '男'
};我们可以使用 Object.entries() 方法将其转换为一个键值对数组，然后按照属性名的字典顺序进行排序：
const sortedEntries = Object.entries(obj).sort(([key1], [key2]) => key1.localeCompare(key2));
其中，sort() 方法接收一个比较函数作为参数，该函数用于定义排序规则。这里我们使用 localeCompare() 方法对两个属性名进行比较，返回值大于 0 表示第二个属性名应该排在前面，小于 0 表示第一个属性名应该排在前面，等于 0 表示两个属性名相等。sortedEntries 的结果如下所示：
[ ['age', 18], ['gender', '男'], ['name', '小明'] ]
最后，我们可以使用 Object.fromEntries() 方法将排好序的键值对数组转换为对象：
const sortedObj = Object.fromEntries(sortedEntries);
console.log(sortedObj); // 输出 { age: 18, gender: '男', name: '小明' }- 总结
Object.fromEntries() 方法是一个非常实用的方法，它可以让我们在 JavaScript 中更加方便地进行对象和数组之间的转换。当然，它的高级用法也是值得我们去探索和学习的。
在实际开发中，我们可以使用 Object.fromEntries() 方法来简化代码、提高代码的可读性和可维护性。在对对象属性进行排序、转换数据类型等场景下，它可以发挥出非常重要的作用。
完整示例代码如下：
-- -------------------- ---- ------- ----- ------- - - -------- ------ ------- ---- ---------- ---- -- ----- --- - ---------------------------- ----------------- -- -- - ----- ----- ---- --- ------- --- - ----- --- - --- ----- -------- ------ ------- ---- ---------- ---- --- ----- ---------- - ------------------------ ------------------------ -- -- - ----- ----- ---- --- ------- --- - ----- ----------- - - ----- ----- ---- --- ------- --- -- ----- ------------- - ----------------------------------------- ------- -- -------------------------- ----- --------- - ---------------------------------- ----------------------- -- -- - ---- --- ------- ---- ----- ---- -
祝大家学习愉快！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f6f82ff6b2d6eab3f87e76