以多個屬性將物件分組並聚合值

在以多個屬性將物件分組並聚合值

在以多個屬性將陣列中的物件分組的任務中，一個常見的要求是不僅可以依這些屬性分組，還可以對某些物件屬性的值進行求和。然而，簡單地將所有重複項嵌套在二維數組中的解決方案是不夠的。

問題陳述

考慮一個必須按形狀分組的物件數組，並且顏色。只有當該數組中的物件的形狀和顏色相同時，才會將其視為重複物件。對於重複的對象，我們需要總結它們的使用值和實例值，並刪除重複項，從而得到具有獨特形狀和顏色的簡潔對象清單。

解決方案

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]) {
    // If it's a unique combination, add to the helper and result array
    helper[key] = Object.assign({}, o);
    r.push(helper[key]);
  } else {
    // If it's a duplicate, update the values in the helper
    helper[key].used  = o.used;
    helper[key].instances  = o.instances;
  }

  return r;
}, []);

console.log(result);

解決方案

為了有效解決這個問題，我們可以結合使用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 },
];

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

  if (!helper[key]) {
    // If it's a unique combination, add to the helper and result array
    helper[key] = Object.assign({}, o);
    r.push(helper[key]);
  } else {
    // If it's a duplicate, update the values in the helper
    helper[key].used  = o.used;
    helper[key].instances  = o.instances;
  }

  return r;
}, []);

console.log(result);

const arr = [ { 形狀：'方形'，顏色：'紅色'，已使用：1，實例：1 }, { 形狀：'正方形'，顏色：'紅色'，已使用：2，實例：1 }， { 形狀：'圓形'，顏色：'藍色'，已使用：0，實例：0 }， { 形狀：'正方形'，顏色：'藍色'，已使用：4，實例：4 }， { 形狀：'圓形'，顏色：'紅色'，已使用：1，實例：1 }， { 形狀：'圓形'，顏色：'紅色'，已使用：1，實例：0 }， { 形狀：'正方形'，顏色：'藍色'，已使用：4，實例：5 }， { 形狀：'正方形'，顏色：'紅色'，已使用：2，實例：1 }， ]; 常量助手 = {}; const 結果 = arr.reduce((r, o) => { const key = `${o.shape}-${o.color}`; if (!helper[key]) { // 如果是唯一組合，則加入到 helper 和 result 陣列中 helper[key] = Object.assign({}, o); r.push(helper[key]); } 別的 { // 如果重複，則更新助手中的值 helper[key].used = o.used; helper[key].instances = o.instances; } 返回 r； }, []); console.log(結果);

輸出：

[ { 形狀：“正方形”，顏色：“紅色”，已使用：5，實例：3 }， { 形狀：“圓形”，顏色：“紅色”，使用次數：2，實例：1 }, { 形狀：“方形”，顏色：“藍色”，已使用：11，實例：9 }， { 形狀：“圓形”，顏色：“藍色”，已使用：0，實例：0 } ]此解決方案按形狀和顏色對物件進行有效分組，聚合重複物件的使用值和實例值，並刪除任何剩餘的重複項，從而產生所需的輸出。