使用 ES10 中的 Object.fromEntries 保持代码更加优雅

在前端开发中，我们经常需要将一个对象转换成另一个对象或数组。在 ES10 中，有一个非常实用的方法 Object.fromEntries() 可以帮助我们更加优雅地执行此任务。

什么是 Object.fromEntries()？

Object.fromEntries() 是 ES10 新增的一个方法，可以将键值对的数组转换为对象。

例如：

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

为什么要使用 Object.fromEntries()？

在 ES10 之前，将键值对的数组转换成对象通常需要使用 reduce 方法：

const entries = [['a', 1], ['b', 2], ['c', 3]];
const obj = entries.reduce((acc, [key, val]) => {
  acc[key] = val;
  return acc;
}, {});
console.log(obj); // { a: 1, b: 2, c: 3 }

虽然上面的代码可以将数组转换为对象，但是代码看起来不太优雅。使用 Object.fromEntries() 可以让代码更加简洁和易于阅读。

Object.fromEntries() 的使用

Object.fromEntries() 可以将数组转换为对象。数组必须是键值对的数组。其中，每个元素都是一个包含两个元素的数组，第一个元素是键, 第二个元素是值。例如：

const entries = [['a', 1], ['b', 2], ['c', 3]];

我们可以使用 Object.fromEntries() 将其转换为对象：

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

即使数组中有重复的键，Object.fromEntries() 也会正确处理。当有重复的键时，Object.fromEntries() 只会使用数组中最后出现的值，其他值将被忽略。例如：

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

Object.fromEntries() 的应用

将 Map 转换为对象

在前端开发中，使用 Map 而不是对象来存储数据是一种常见的情况。但是，有时候我们需要将 Map 转换为对象。假设我们有以下的 Map：

const map = new Map([['a', 1], ['b', 2], ['c', 3]]);

我们可以使用 Object.fromEntries() 将其转换为对象：

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

将对象的键和值对调

在前端开发中，有时候我们需要将对象的键和值对调。使用 Object.entries() 和 Object.fromEntries() 我们可以很容易地实现。

例如，假设我们有以下的对象：

const obj = { a: 1, b: 2, c: 3 };

我们可以使用 Object.entries() 和 Object.fromEntries() 将其键和值对调：

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

总结

使用 Object.fromEntries() 可以让我们更加方便地将键值对的数组转换为对象。它可以让我们的代码更加简洁和易于阅读，同时还可以应用于一些比较常见的场景，例如将 Map 转换为对象以及将对象的键和值对调。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645cc1d7968c7c53b0f372c5