首页 > web前端 > js教程 > 正文

如何通过多个属性有效地将数组中的对象分组并汇总它们的值?

Barbara Streisand
发布: 2024-11-08 15:53:02
原创
222 人浏览过

How to efficiently group objects in an array by multiple properties and summarize their values?

使用数组中的多个属性进行高效对象分组

对数组中的对象进行分组的任务可以扩展到单个属性之外;在某些情况下,需要考虑多个属性进行分组。在这种情况下,需要定制的方法。

让我们解决根据形状和颜色对对象进行分组的问题。目标是将具有相同形状和颜色的对象分组,同时汇总其使用值和实例值。

预期行为:

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 expectedResult = [
  { 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 }
];
登录后复制

关键注意事项:

  • 识别形状和颜色的独特组合属性。
  • 总结具有相同组合的对象的使用值和实例值。

解决方案:

利用 Array#reduce,我们可以迭代数组,同时维护一个辅助对象来跟踪形状-颜色组合。

对于每个对象:

  • 根据形状和颜色属性构造唯一的键。
  • 如果在辅助对象中找不到该键:

    • 创建一个新对象作为当前对象的副本。
    • 将其添加到助手中对象。
    • 将其包含在结果数组中。
  • 如果键已在辅助对象中:

    • 递增帮助器中现有对象的使用值和实例值对象。

此过程有效地将具有相同形状和颜色的对象分组,同时累积其值。

代码片段:

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 }
];

let helper = {};
const result = arr.reduce((r, o) => {
  const key = `${o.shape}-${o.color}`;

  if (!helper[key]) {
    helper[key] = Object.assign({}, 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 }
]
登录后复制

通过利用此技术,您可以根据多个属性有效地对值进行分组和求和,使您能够处理数组中复杂的数据操作任务。

以上是如何通过多个属性有效地将数组中的对象分组并汇总它们的值?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板