如何在 JavaScript 中按多个属性对对象进行分组并聚合它们的值？

按多个属性对对象进行分组并聚合它们的值

按多个属性对数组中的元素进行分组对于数据组织和汇总至关重要。为了满足按形状和颜色对对象进行分组并聚合其值的特定要求，我们可以利用 JavaScript 内置方法的强大功能。

第 1 步：Array#reduce

Array#reduce 方法提供了一种简洁有效的方法来迭代数组，累积各个元素的单个输出。在这种情况下，我们可以使用它根据组合的形状和颜色属性来累积对象。

第 2 步：辅助对象

我们使用辅助对象来跟踪形状和颜色的独特组合。对于数组中的每个对象，我们通过连接形状和颜色属性来检查帮助器中是否存在该组合。如果不存在，我们在辅助对象中创建一个新条目，同时将当前对象的副本推送到结果数组中。

第 3 步：值聚合

如果辅助对象中已经存在类似的组合，我们只需增加相应条目的使用值和实例值，即可有效聚合当前对象中的值。

第 4 步：对象复制

为了避免修改数组中的原始对象，我们使用 Object.assign 创建一个副本。这确保了辅助对象包含对象的独立副本，从而允许我们单独聚合值。

实现：

const arr = [
  { shape: 'square', color: 'red', used: 1, instances: 1 },
  { shape: 'square', color: 'red', used: 2, instances: 1 },
  { shape: 'circle', color: 'blue', used: 0, instances: 0 },
  { shape: 'square', color: 'blue', used: 4, instances: 4 },
  { shape: 'circle', color: 'red', used: 1, instances: 1 },
  { shape: 'circle', color: 'red', used: 1, instances: 0 },
  { shape: 'square', color: 'blue', used: 4, instances: 5 },
  { shape: 'square', color: 'red', used: 2, instances: 1 },
];

const helper = {};
const result = arr.reduce((r, o) => {
  const key = o.shape + '-' + o.color;
  if (!helper[key]) {
    helper[key] = Object.assign({}, o); // create a copy of o
    r.push(helper[key]);
  } else {
    helper[key].used += o.used;
    helper[key].instances += o.instances;
  }
  return r;
}, []);

console.log(result);

输出：

[
  { shape: 'square', color: 'red', used: 5, instances: 3 },
  { shape: 'circle', color: 'red', used: 2, instances: 1 },
  { shape: 'square', color: 'blue', used: 11, instances: 9 },
  { shape: 'circle', color: 'blue', used: 0, instances: 0 }
]

该解决方案有效地按形状和颜色聚合对象，提供一致的数据摘要。

以上是如何在 JavaScript 中按多个属性对对象进行分组并聚合它们的值？的详细内容。更多信息请关注PHP中文网其他相关文章！