How do you group JavaScript objects by multiple properties and sum their values?

Grouping Objects By Multiple Properties and Summing Their Values

In JavaScript, it's common to work with arrays of objects. Sometimes, it's necessary to group these objects by multiple properties while performing calculations on their values, such as summing up specific properties.

Problem Overview

Given an array of objects, we aim to group them based on two properties (shape and color). However, we want to treat objects as duplicates only if their shape and color match. The goal is to sum up the used and instances properties of objects within each group and remove any duplicates.

Expected Result

Using the following sample array:

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

We expect to obtain an array with four groups:

[{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}]

Solution Using Array#reduce and Object#assign

To achieve this, we can utilize JavaScript's Array#reduce method to iterate over the array of objects. For each object, we construct a unique key by concatenating the shape and color properties. We then use an auxiliary object, helper, to keep track of the grouped objects.

var helper = {};
var result = arr.reduce(function(r, o) {
  var 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;
}, []);

If the key does not exist in the helper object, we add a new entry using Object.assign() to create a fresh copy of the current object. We then push this new object into the result array.

If the key already exists in helper, it means we've encountered a duplicate. In this case, we simply increment the used and instances properties of the corresponding object in helper.

Finally, we return the result array, which effectively groups objects by shape and color while summing their values.

The above is the detailed content of How do you group JavaScript objects by multiple properties and sum their values?. For more information, please follow other related articles on the PHP Chinese website!