ES9 新特性：Object.fromEntries() 实例和应用

ES9 引入了一个新的方法：Object.fromEntries()，它可以将键值对列表转换为一个对象。Object.fromEntries() 可以与 Object.entries() 相结合，将对象转换为键值对列表，然后使用 Object.fromEntries() 将它们转换回对象。

这个新方法在前端开发中非常有用。在这篇文章中，我们将介绍 Object.fromEntries() 的用法，并提供一些实际的应用示例。

Object.fromEntries() 的基本用法

Object.fromEntries() 接收一个键值对数组作为参数，并返回一个基于这些键值对的新对象。例如：

const entries = [['a', 1], ['b', 2], ['c', 3]];
const obj = Object.fromEntries(entries);
console.log(obj); // {a:1, b:2, c:3}

从上面的代码中不难看出，Object.fromEntries() 可以使用一个数组，或者一个可迭代对象作为参数。

Object.fromEntries() 的应用

转换 Map 为对象

在开发过程中，我们通常会使用 Map 类型，而非对象类型。Map 类型也是键值对的集合，但是它跟对象不同的是，在 JavaScript 中不能使用点符号 (.) 和中括号 ([]) 来访问 Map 的值。

但是，有时将 Map 转换成对象是很有用的。此时，Object.fromEntries() 就会派上用场，因为它可以将 Map 转换成对象。例如：

const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
const obj = Object.fromEntries(map);
console.log(obj); // {a:1, b:2, c:3}

从这个例子中，我们可以看出 Object.fromEntries() 方法可以完成 Map 到对象的转换。

过滤对象属性

Object.fromEntries() 还可以用于过滤对象的属性。我们可以使用 Object.entries() 方法，将一个对象转换成键值对的形式，然后过滤掉一部分属性，再使用 Object.fromEntries() 将其转换成一个新的对象。

const obj = {
  a: 1,
  b: 2,
  c: 3
};
const keys = ['a', 'c'];
const filtered = Object.fromEntries(Object.entries(obj).filter(([key, value]) => keys.includes(key)));
console.log(filtered); // {a:1, c:3}

从代码中可以看出，Object.fromEntries() 很容易将一个键值对数组转换成一个对象，并过滤掉一些属性，使得新对象只包含我们想要的属性。

将对象属性重命名

如果我们想要将对象中的某个属性改名，也可以使用 Object.fromEntries() 来完成。可以先将对象转换成键值对数组，然后修改键名，再使用 Object.fromEntries() 将其转换回对象。

const obj = {
  a: 1,
  b: 2,
  c: 3
};
const renamed = Object.fromEntries(Object.entries(obj).map(([key, value]) => [`${key}_new`, value]));
console.log(renamed); // {a_new:1, b_new:2, c_new:3}

从代码中可以看出，Object.fromEntries() 能够将一个键值对数组转换为一个新的对象，并且可以在此过程中修改对应的键名。

结论

在本文中，我们详细介绍了 Object.fromEntries() 的用法及其在前端开发中的应用。我们可以使用它轻松地转换 Map 类型为对象，过滤对象属性，或重命名对象属性等一系列操作。

因此，Object.fromEntries() 方法在现代 JavaScript 中是一个强大的工具，它能够帮助我们从复杂的数据类型中快速提取出我们需要的数据。特别是在处理基于键值对的数据类型时，它将会是我们不可或缺的工具之一。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66fb6dc144713626015cc008