在 JavaScript 的语言规范更新中，ES10 （ECMAScript 2019）增加了一些新的实用特性，其中之一就是 Object.fromEntries 方法。这个方法可以将键值对列表转换为对象。本文将深入探讨 Object.fromEntries 的使用，包括其对我们在前端开发中的意义和相关的实例代码。
Object.fromEntries 的作用
Object.fromEntries 方法用于将键值对列表转换为对象。它接受一个数组或者可迭代对象作为参数，并返回一个新的对象。这个方法可以接受一个二维数组，其中每个子数组都由两个元素组成，第一个元素是键，第二个元素是值。这个方法可以帮助我们简化一些任务，比如：
- 将 Map 转换为对象；
- 将对象的属性转换为数组并重新组合为对象；
- 创建一个新的对象，并将其初始化为一个给定的键值映射。
举一个例子，可以通过使用 Object.fromEntries 将一个 Map 对象转换为一个简单对象。它可以将 Map 对象中的所有键值转换为对象的属性和值。
const map = new Map([['a', 1], ['b', 2], ['c', 3]]); const obj = Object.fromEntries(map); console.log(obj.a); // 1 console.log(obj.b); // 2 console.log(obj.c); // 3
Object.fromEntries 的实例
下面是一些实例说明，它们说明了在实现不同的任务时，Object.fromEntries 可能会非常有用。
1. 将数组转换为对象
我们可以使用 Object.fromEntries 方法将一个由键值对数组组成的数组转换为一个对象。例如：
-- -------------------- ---- ------- ----- --- - - -------- --------- ------- ---- -------- ---------- -- ----- --- - ------------------------ ----------------- -- - ----- -------- ---- --- ----- --------- -
2. 删除对象中某些特定属性
我们可以通过将对象的属性之一转换为数组，然后使用 Array.prototype.filter 方法来删除特定属性。最后，我们再将数组转换回对象。例如：
-- -------------------- ---- ------- ----- ------ - - ----- -------- ---- --- ----- --------- -- ----- ------ - ------- -------- ----- --- - ------------------- ------------------------------------- -- ---------------------- -- ----------------- -- - ----- ------- -
在这个实例中，我们将 person 对象的属性转换为数组，并使用 Array.prototype.filter 方法来删除 age 和 city 属性。最后，我们将数组转换回对象，并将其保存到 obj 中。
3. 从 URL 参数中创建对象
我们可以将 URL 中的查询参数转换为一个包含对象的单一对象（比如解析传递给脚本的 location.search）。
const search = '?q=javascript&framework=react&stack=dev';
const obj = Object.fromEntries(new URLSearchParams(search));
console.log(obj); // { q: 'javascript', framework: 'react', stack: 'dev' }在这个实例中，我们创建了一个新的 URLSearchParams 并传入一个字符串，然后通过 Object.fromEntries 方法创建了一个新的对象（保存到变量 obj 中）。该对象包含了解析自查询字符串的所有参数和值。
总结
Object.fromEntries 方法是一个非常有用的工具，可以帮助我们将一个包含键值对的数组转换为一个对象。这个方法可以使我们的代码更整齐、更可读，并减少代码的长度。我们可以使用它来创建新的对象、过滤掉对象的属性或将 URL 中的参数转换为一个包含对象的对象，等等。在前端开发中，Object.fromEntries 更是有着广泛的使用领域。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cc9bdc5ad90b6d0429e846