如何使用 ES9 的 Object.fromEntries 方法

如何使用 ES9 的 Object.fromEntries 方法

在 ES9 中引入了一个新的方法 Object.fromEntries()，它可以将由键值对构成的数组转换成一个对象。使用这个方法，我们可以简洁地将一个数组转换成一个对象，并且可以灵活地操作这个对象。本文将详细介绍 Object.fromEntries() 的使用方法及其指导意义。

使用 Object.fromEntries 方法的基本用法

Object.fromEntries() 方法的基本用法非常简单，只需要将一个由键值对构成的数组传递给这个方法即可。例如：

const entries = [['name', 'Jack'], ['age', 30]];
const obj = Object.fromEntries(entries);
console.log(obj); // { name: "Jack", age: 30 }

在这个例子中，我们定义了一个由两个键值对构成的数组 entries，然后使用 Object.fromEntries() 方法将这个数组转换成了一个对象 obj。转换后的对象中，键是数组中的第一个元素，值是数组中的第二个元素。

Object.fromEntries 方法的高级用法

除了基本用法之外，Object.fromEntries() 方法还有一些高级用法，可以让我们更灵活地操作对象。下面列举了几个高级用法：

1. 对象的解构赋值

我们可以使用对象的解构赋值，将一个对象的键值对分别解构到变量中：

const obj = { name: "Jack", age: 30 };
const { name, age } = obj;
console.log(name, age); // Jack 30

但是，在 ES9 中我们还可以使用 Object.entries() 方法将这个对象转换成由键值对构成的数组，然后再使用 Object.fromEntries() 方法将这个数组转换成一个对象：

const obj = { name: "Jack", age: 30 };
const entries = Object.entries(obj);
const newObj = Object.fromEntries(entries);
console.log(newObj); // { name: "Jack", age: 30 }

这种做法看起来有些冗余，但是在一些复杂的情况下，这种方式会使代码更加易于转换与维护。

1. 过滤特定的键值对

在某些情况下，我们可能需要从一个对象中挑选出一些特定的键值对，然后将它们转换成一个新的对象。使用 Object.fromEntries() 方法，我们可以轻松地实现这个功能：

const obj = { name: "Jack", age: 30, email: "jack@example.com" };
const keys = ['name', 'age'];
const entries = Object.entries(obj).filter(([key, value]) => keys.includes(key));
const newObj = Object.fromEntries(entries);
console.log(newObj); // { name: "Jack", age: 30 }

在这个例子中，我们定义了一个对象 obj，然后过滤出了其中的 name 和 age 两个键，然后使用 Object.fromEntries() 方法将这两个键值对转换成了一个新的对象 newObj。

1. 使用 reduce 方法操作数组转换成对象

Object.fromEntries() 方法可以与 reduce 方法一起使用，将一个数组转换成一个对象。例如，我们可以使用 reduce 方法计算一个数组中每个元素出现的次数：

const arr = [1, 2, 3, 2, 1, 3, 3, 3, 3];
const obj = arr.reduce((acc, cur) => {
  acc[cur] = acc[cur] ? acc[cur] + 1 : 1;
  return acc;
}, {});
console.log(obj); // { "1": 2, "2": 2, "3": 5 }

在这个例子中，我们定义了一个数组 arr，然后使用 reduce 方法计算每个元素出现的次数，最后使用 Object.fromEntries() 方法将结果转换成了一个对象。

结语

Object.fromEntries() 方法可以让我们更加灵活地处理对象数据，有效提高代码的可读性和维护性。需要注意的是，这个方法在 ES9 中才新增，因此如果需要兼容之前的浏览器，可能需要手动 polyfill。

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