如何在 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中文網其他相關文章！