ES10 新特性：Object.fromEntries() 方法的实用案例-JavaScript中文网-JavaScript教程资源分享门户

什么是 Object.fromEntries() 方法？

ES10 中新增了一个 Object.fromEntries() 方法，用来将一个给定的键值对数组转换成一个对象。它接受一个形如 [key, value] 的数组作为参数，将其转换为对象，其中 key 对应对象的属性名，value 对应对象的属性值。

为什么使用 Object.fromEntries() 方法？

在编写代码时，我们有时会使用键值对数组来表示对象属性，如下所示：

const data = [
  ['name', '小明'],
  ['age', 18],
  ['gender', '男']
];

我们需要将上述数组转换为一个对象，以便于搜索、操作、修改和删除其中的属性。在 ES6 之前，我们需要使用下面的代码来手动将键值对数组转换成对象：

const dataObj = {};
for (let [key, value] of data) {
  dataObj[key] = value;
}

这样做十分麻烦，代码也很冗长。如果我们要反向将对象转换为数组，同样需要手动遍历对象并将其转换为数组。实际上，我们可以利用 ES10 新增的 Object.fromEntries() 方法来做到这一点。

Object.fromEntries() 的实用案例

下面，我们将介绍一个 Object.fromEntries() 实用案例，通过示例代码展示其用法。

问题描述

我们正在编写一个在线商店的购物车应用程序，需要计算用户购物车中各种商品的总价值。已知每个商品的名称、单价和数量，以及用户的购物车列表，请编写代码计算总价值，并将结果打印到控制台上。

购物车数据结构

购物车数据存储在一个数组中，每个元素表示购物车中的一个商品，其数据结构如下所示：

const cart = [
  {name: 'iPhone X', price: 7999, amount: 2},
  {name: '华为 Mate 20 Pro', price: 4999, amount: 1},
  {name: '小米 Mix 3', price: 2999, amount: 3},
  {name: '三星 Note 9', price: 6999, amount: 2},
  {name: 'OPPO R17 Pro', price: 3999, amount: 1}
];

计算总价值

为了计算总价值，我们需要将购物车数组转换为一个对象，其中属性名为商品名称，属性值为商品总价值（即单价乘以购买数量），并将所有商品的总价值相加。下面是使用 Object.fromEntries() 方法实现该算法的代码：

const cartObj = Object.fromEntries(cart.map(item => [item.name, item.price * item.amount]));
const totalPrice = Object.values(cartObj).reduce((sum, price) => sum + price);
console.log(totalPrice); // 输出：39971

首先，我们通过 Array.map() 方法将购物车数组转换为以商品名称为键、商品总价值为值的键值对数组。在此之后，我们使用 Object.fromEntries() 方法将其转换为一个对象。最后，我们使用 Object.values() 方法获取对象中所有属性值的数组，并使用 Array.reduce() 方法求和计算出所有商品的总价值。

结论

ES10 中新增的 Object.fromEntries() 方法提供了一种更加简洁和高效的方法，可以将键值对数组快速转换为对象。我们既可以使用它来转换购物车数组为对象，也可以使用它来将对象转换为数组。在实际开发中，我们可以灵活运用该方法来提高代码的可读性和可维护性。

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