ES11 中的 Object.fromEntries() - 一个实用工具
在 ES2019 中，一个新的 Object 静态方法 fromEntries() 加入了 JavaScript。这项工具有助于将从 Map 对象或其他类似键值对结构的数据中检索到的数据转换为一个新的 Object 对象。
在这篇文章中，我们将更深入地探讨 Object.fromEntries() 的用法及其对前端开发的指导意义。
Object.fromEntries() 的概述
Object.fromEntries() 方法的作用是将键值对列表转换为对象。这个方法是静态方法，因此它不需要创建任何实例就可以使用。
语法如下：
Object.fromEntries(iterable)
参数 iterable：一个可迭代对象，其元素应为键值对数组。
返回值：一个新的对象。
Object.fromEntries() 的流程
Object.fromEntries() 的使用方式可以说是反向操作，即从 Map 或数组等序列化（序列化时会变为键值对形式的数据）格式到对象进行反序列化。
具体来说，这里的可迭代器是一些键值对的数组，使用 Object.fromEntries() 方法可以将该数组转换为一个新的对象，键值对数组中每个元素将会被转化为对象的一个键和一个值：键为元素的第一个值，值为元素的第二个值。
值得注意的是，Object.keys()方法提供了一种把一个对象转换为一个键值对的数组，因此此处传递给 Object.fromEntries() 方法的可迭代对象可以很大程度上同 Object.keys() 方法的输出相匹配。
Object.fromEntries() 的用法
让我们来看一下如何使用 Object.fromEntries() 方法。
- 将一个 Map 对象转换为一个对象
const map = new Map([['a', 1], ['b', 2]]);
const obj = Object.fromEntries(map);
console.log(obj); // { a: 1, b: 2 }- 使用 .entries() 或 .from() 转换一个数组对象
const arr = [['x', 1], ['y', 2], ['z', 3]];
const obj1 = Object.fromEntries(arr.entries());
console.log(obj1); // { x: 1, y: 2, z: 3 }
const obj2 = Object.fromEntries(new Map(arr));
console.log(obj2); // { x: 1, y: 2, z: 3 }- 对象变换
-- -------------------- ---- ------- --------------------------- -------------------------------------------- ------------------------------------------------------------- ---------------- - ------------------------ ---- ----- -------------- - - -- -- -- -- -- -- -- -- - ----- --------- - ------------------- -------------------------------------------- ------- -- ----- - -- -- ----------------------- -- - -- -- -- - -
这段示例代码展示了如何使用 Object.entries() 和 Array.prototype.filter() 对原始对象进行筛选处理，并将结果转换为新对象。
Object.fromEntries() 的作用在于快速、简单和可读性较强地将键值数组转换为对象。当然，它的能力也扩展到更为复杂和有意义的操作。
结论
在本文中，我们深入探讨了 ES11 中 Object.fromEntries() 方法的使用方法，阐述了对象反序列化的流程，以及该方法的更高级的用法。
Object.fromEntries() 方法提供了一种快速、简单且可读性强的方法将键值对数组转换为对象。对于那些需要对数据进行筛选处理的开发者而言，该方法也扩展了对象操作的能力范围，非常实用。
当然，根据您的具体需求，您也可以灵活地使用 ES11 中其他新特性，深入掌握前端开发的技能和知识。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f7c68cc5c563ced5aa40e0