資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟
心理學
社會科學
時尚研究
法律研究基於物件陣列進行分組的最有效方法 - JavaScript
假設，我們有一個這樣的物件陣列 −
const arr = [
{ Phase: "Phase 1", Step: "Step 1", Task: "Task 1", Value: "5" },
{ Phase: "Phase 1", Step: "Step 1", Task: "Task 2", Value: "10" },
{ Phase: "Phase 1", Step: "Step 2", Task: "Task 1", Value: "15" },
{ Phase: "Phase 1", Step: "Step 2", Task: "Task 2", Value: "20" },
{ Phase: "Phase 2", Step: "Step 1", Task: "Task 1", Value: "25" },
{ Phase: "Phase 2", Step: "Step 1", Task: "Task 2", Value: "30" },
{ Phase: "Phase 2", Step: "Step 2", Task: "Task 1", Value: "35" },
{ Phase: "Phase 2", Step: "Step 2", Task: "Task 2", Value: "40" }
];我們需要編寫一個 JavaScript 函式，該函式把其中一個這樣的陣列作為第一個引數。
我們的目的是能夠根據多個或單個屬性（由第二個、第三個引數指示）對給定的陣列進行分組。
因此，如果我們對 Phase 進行分組，我們應該收到 −
const output = [
{ Phase: "Phase 1", Value: 50 },
{ Phase: "Phase 2", Value: 130 }
];如果我們對 Phase / Step 進行分組，我們應該收到 −
const output = [
{ Phase: "Phase 1", Step: "Step 1", Value: 15 },
{ Phase: "Phase 1", Step: "Step 2", Value: 35 },
{ Phase: "Phase 2", Step: "Step 1", Value: 55 },
{ Phase: "Phase 2", Step: "Step 2", Value: 75 }
];示例
程式碼如下 −
const arr = [
{ Phase: "Phase 1", Step: "Step 1", Task: "Task 1", Value: "5" },
{ Phase: "Phase 1", Step: "Step 1", Task: "Task 2", Value: "10" },
{ Phase: "Phase 1", Step: "Step 2", Task: "Task 1", Value: "15" },
{ Phase: "Phase 1", Step: "Step 2", Task: "Task 2", Value: "20" },
{ Phase: "Phase 2", Step: "Step 1", Task: "Task 1", Value: "25" },
{ Phase: "Phase 2", Step: "Step 1", Task: "Task 2", Value: "30" },
{ Phase: "Phase 2", Step: "Step 2", Task: "Task 1", Value: "35" },
{ Phase: "Phase 2", Step: "Step 2", Task: "Task 2", Value: "40" }
];
const groupBy = (array, groups, valueKey) => {
const map = new Map;
groups = [].concat(groups);
return array.reduce((acc, val) => {
groups.reduce((accu, value, ind, { length }) => {
let child;
if (accu.has(val[value])) {
return accu.get(val[value]);
};
if (ind + 1 === length) {
child = Object
.assign(...groups.map(value => ({ [value]: val[value]
})), { [valueKey]: 0 });
acc.push(child);
}
else {
child = new Map;
};
accu.set(val[value], child);
return child;
}, map)[valueKey] += +val[valueKey];
return acc;
}, []);
};
console.log(groupBy(arr, 'Phase', 'Value'));
console.log(groupBy(arr, ['Phase', 'Step'], 'Value'));輸出
控制檯中的輸出將如下 −
[ { Phase: 'Phase 1', Value: 50 }, { Phase: 'Phase 2', Value: 130 } ]
[
{ Phase: 'Phase 1', Step: 'Step 1', Value: 15 },
{ Phase: 'Phase 1', Step: 'Step 2', Value: 35 },
{ Phase: 'Phase 2', Step: 'Step 1', Value: 55 },
{ Phase: 'Phase 2', Step: 'Step 2', Value: 75 }
]
更新日期: 24-Nov-2020
已閱讀 207 次
廣告