透過多個屬性將物件分組並求和它們的值
在 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中文網其他相關文章！
