在现代前端开发中，尤其是在ReactJS等框架构建的组件中，我们经常需要处理来自后端或本地存储的复杂数据结构。其中一个常见需求是，对一个对象数组进行分组并计算每个组的总和，这与关系型数据库中SQL的GROUP BY和SUM操作非常相似。例如，我们可能需要根据某个属性（如ProjectType）将数据分组，然后计算每个组内其他数值型属性（如Amount和Hours）的总和。
考虑以下一个包含项目数据的数组：
const frames = [
{
ProjectName: "Blue",
EmployeeGroup: false,
Amount: 50,
Hours: 15,
ProjectType: "Romeo",
},
{
ProjectName: "Red",
EmployeeGroup: false,
Amount: 20,
Hours: 5,
ProjectType: "Lima",
},
{
ProjectName: "Green",
EmployeeGroup: true,
Amount: 40,
Hours: 10,
ProjectType: "Lima",
}
];我们的目标是根据ProjectType对这些数据进行分组，并计算每个ProjectType下Amount和Hours的总和，最终得到如下结构：
[
{
ProjectType: "Lima",
TotalAmount: 60,
TotalHours: 15,
},
{
ProjectType: "Romeo",
TotalAmount: 50,
TotalHours: 15,
}
]传统方法及其局限性
立即学习“Java免费学习笔记（深入）”；
初学者可能会尝试结合filter和reduce方法来解决。例如，要计算"Lima"项目的总金额，可以这样做：
const filterAndSumAmount = (array, projectType) => {
const filteredItems = array.filter(item => item.ProjectType === projectType);
const totalAmount = filteredItems.reduce((accumulator, currentVal) => accumulator + currentVal.Amount, 0);
return totalAmount;
};
console.log(filterAndSumAmount(frames, "Lima")); // 输出: 60这种方法虽然能得到单个分组的某个总和，但它效率不高，因为它需要对每个分组和每个求和字段重复过滤和求和操作。如果我们需要计算多个分组的多个总和，这将导致多次遍历原始数组，代码也会变得冗余且难以维护。
高效的分组求和解决方案
为了高效地实现类似SQL的GROUP BY和SUM操作，我们可以采用一种单次遍历数组并使用一个中间对象来累积结果的方法。这种方法的核心思想是利用对象的键值对来动态地存储每个分组的聚合数据。
实现步骤：
- 初始化中间对象： 创建一个空对象，用于存储按ProjectType分组的聚合数据。
- 遍历原始数组： 使用forEach或for...of循环遍历frames数组中的每一个对象。
-
动态分组与累加：
- 对于数组中的每一个项目，提取其ProjectType作为分组键。
- 检查中间对象中是否已经存在以该ProjectType为键的条目。
- 如果不存在，则为该ProjectType创建一个新的条目，并初始化TotalAmount和TotalHours为0。
- 如果已存在或刚创建，将当前项目的Amount和Hours累加到对应ProjectType的TotalAmount和TotalHours中。
- 转换最终结果： 遍历结束后，中间对象将包含所有分组的聚合数据。使用Object.values()方法将这个对象转换为一个数组，其中每个元素就是我们期望的最终结果对象。
示例代码：
const frames = [
{ ProjectName: "Blue", EmployeeGroup: false, Amount: 50, Hours: 15, ProjectType: "Romeo" },
{ ProjectName: "Red", EmployeeGroup: false, Amount: 20, Hours: 5, ProjectType: "Lima" },
{ ProjectName: "Green", EmployeeGroup: true, Amount: 40, Hours: 10, ProjectType: "Lima" }
];
const aggregateByProjectType = (data) => {
const aggregatedItems = {}; // 步骤1: 初始化中间对象
data.forEach(({ ProjectType, Amount, Hours }) => { // 步骤2: 遍历原始数组并使用对象解构
// 步骤3: 动态分组与累加
if (!aggregatedItems[ProjectType]) {
// 如果该ProjectType是第一次出现，则初始化其聚合数据
aggregatedItems[ProjectType] = {
ProjectType: ProjectType,
TotalAmount: 0,
TotalHours: 0
};
}
// 累加当前项目的Amount和Hours到对应的分组
aggregatedItems[ProjectType].TotalAmount += Amount;
aggregatedItems[ProjectType].TotalHours += Hours;
});
// 步骤4: 转换最终结果为数组
const output = Object.values(aggregatedItems);
return output;
};
const result = aggregateByProjectType(frames);
console.log(result);
/*
输出:
[
{ ProjectType: 'Romeo', TotalAmount: 50, TotalHours: 15 },
{ ProjectType: 'Lima', TotalAmount: 60, TotalHours: 15 }
]
*/代码解析：
- aggregatedItems = {}: 这个空对象是我们的“累加器”。它的键将是ProjectType的值（例如 "Lima", "Romeo"），值将是包含ProjectType、TotalAmount和TotalHours的对象。
- data.forEach(({ ProjectType, Amount, Hours }) => { ... }): 我们使用forEach方法遍历frames数组。({ ProjectType, Amount, Hours })是ES6的对象解构语法，它允许我们直接从当前迭代的对象中提取所需的属性，使代码更简洁。
- if (!aggregatedItems[ProjectType]): 这是一个关键的检查。它判断aggregatedItems对象中是否已经存在以当前ProjectType为键的条目。如果不存在，说明这是我们第一次遇到这个ProjectType，需要为其创建一个新的聚合对象并初始化TotalAmount和TotalHours为0。
- aggregatedItems[ProjectType].TotalAmount += Amount;: 无论ProjectType是新创建的还是已经存在的，我们都将其Amount和Hours累加到对应的TotalAmount和TotalHours中。
- Object.values(aggregatedItems): 最后，Object.values()方法将aggregatedItems对象的所有可枚举属性值（即我们聚合后的项目对象）作为一个数组返回，这正是我们期望的最终输出格式。
注意事项与总结：
- 效率高： 这种方法只需要单次遍历原始数组，时间复杂度为O(n)，其中n是数组的长度，非常高效。
- 可扩展性强： 如果需要聚合更多的数值型字段，只需在初始化和累加步骤中添加相应的字段即可。
- 易于理解： 使用中间对象进行动态分组和累加的逻辑直观明了，易于理解和维护。
- 适用性广： 这种模式不仅适用于ReactJS组件中的数据处理，也适用于任何纯JavaScript环境下的数组对象聚合需求。
通过这种方式，我们可以在JavaScript中优雅且高效地模拟SQL的GROUP BY和SUM操作，从而灵活地处理和展示复杂的数据统计结果。
