如何以多個屬性對 JavaScript 物件分組並對它們的值求和？

透過多個屬性將物件分組並求和它們的值

在 JavaScript 中，通常使用物件陣列。有時，需要根據多個屬性對這些物件進行分組，同時對它們的值進行計算，例如對特定屬性求和。

問題概述

給定一個物件數組，我們的目標是根據兩個屬性（形狀和顏色）將它們分組。但是，只有當物件的形狀和顏色相符時，我們才將其視為重複項。目標是總結每個群組中物件的使用屬性和實例屬性，並刪除任何重複項。

預期結果

使用以下範例陣列：

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

我們預期會取得一個包含四個的陣列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}]

使用Array#reduce 和Object#assign的解決方案

為了實現這一點，我們可以利用 JavaScript 的 Array#reduce 方法來迭代數組物件。對於每個對象，我們透過連接形狀和顏色屬性來構造一個唯一的鍵。然後，我們使用輔助物件 helper 來追蹤分組的物件。

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;
}, []);

如果輔助物件中不存在該鍵，我們使用 Object.assign() 新增一個條目來建立目前物件的新副本。然後我們將這個新物件推入結果陣列中。

如果該鍵已存在於 helper 中，則表示我們遇到了重複項。在這種情況下，我們只需增加 helper 中對應物件的used和instances屬性即可。

最後，我們傳回結果數組，該數組有效地按形狀和顏色對物件進行分組，同時對它們的值進行求和。

以上是如何以多個屬性對 JavaScript 物件分組並對它們的值求和？的詳細內容。更多資訊請關注PHP中文網其他相關文章！