JavaScript数组高效分组求和技巧

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《JavaScript数组对象高效聚合：模拟SQL分组与求和》，聊聊，我们一起来看看吧！

数据聚合的挑战：模拟SQL的GROUP BY与SUM

在数据处理中，我们经常需要对数据集进行分组并计算每个组的总和、平均值或其他聚合指标。例如，给定一个包含项目名称、员工组、金额和工时等信息的数组，我们可能需要根据项目类型（ProjectType）对数据进行分组，并计算每个项目类型的总金额（TotalAmount）和总工时（TotalHours）。这在关系型数据库中通过SQL的GROUP BY和SUM语句可以轻松实现。

例如，我们有以下原始数据：

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: "Lima",
    TotalAmount: 60, // 20 + 40
    TotalHours: 15,  // 5 + 10
  },
  {
    ProjectType: "Romeo",
    TotalAmount: 50,
    TotalHours: 15,
  }
]

在JavaScript中，直接使用array.filter和array.reduce组合虽然可以解决单个分组的求和问题，但对于需要同时处理多个分组的场景，这种方法可能导致重复迭代或复杂的逻辑，效率不高。例如，为每个ProjectType单独过滤并求和，然后手动组合结果，显然不是最优解。

高效的数据聚合策略：基于对象哈希映射

为了在JavaScript中高效地实现类似SQL的GROUP BY和SUM功能，我们可以利用JavaScript对象的特性作为哈希映射（Hash Map）。这种方法的核心思想是：创建一个中间对象，其键（key）是我们要分组的属性值（例如ProjectType），其值（value）是该分组的聚合结果（例如总金额和总工时）。

实现步骤：

1. 初始化一个空对象：这个对象将作为我们的聚合容器。
2. 遍历原始数组：使用forEach或其他迭代方法遍历frames数组中的每一个元素。
3. 按分组键进行聚合：
   • 对于每个元素，提取其ProjectType作为分组键。
   • 检查中间对象中是否已存在该ProjectType作为键。
     • 如果不存在，则表示这是该ProjectType的第一个元素。在中间对象中以ProjectType为键创建一个新条目，并初始化TotalAmount和TotalHours为当前元素的Amount和Hours。
     • 如果已存在，则表示该ProjectType已有一个聚合结果。直接将当前元素的Amount和Hours累加到现有条目的TotalAmount和TotalHours中。
4. 转换回数组：遍历完成后，中间对象包含了所有分组的聚合结果。使用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 aggregatedItems = {}; // 步骤1: 初始化聚合容器

// 步骤2&3: 遍历并按分组键聚合
frames.forEach( ({ProjectType, Amount, Hours}) => {
  // 如果当前ProjectType尚未在aggregatedItems中，则初始化
  if (!aggregatedItems[ProjectType]) {
    aggregatedItems[ProjectType] = { ProjectType: ProjectType, TotalAmount: 0, TotalHours: 0 };
  }
  // 累加金额和工时
  aggregatedItems[ProjectType].TotalAmount += Amount;
  aggregatedItems[ProjectType].TotalHours += Hours;
});

// 步骤4: 将聚合结果从对象转换为数组
const output = Object.values(aggregatedItems);
console.log(output);

代码解析：

1. const aggregatedItems = {};：创建一个空对象aggregatedItems，它将临时存储我们的聚合数据。ProjectType将作为这个对象的键。
2. frames.forEach( ({ProjectType, Amount, Hours}) => { ... });：使用forEach方法遍历frames数组。这里使用了对象解构赋值，直接提取了每个frame对象的ProjectType、Amount和Hours属性，使代码更简洁。
3. if (!aggregatedItems[ProjectType]) { ... }：这是聚合逻辑的关键。它检查aggregatedItems对象是否已经有了以当前ProjectType为键的条目。
   • 如果!aggregatedItems[ProjectType]为真（即该ProjectType是第一次出现），则创建一个新的对象{ ProjectType: ProjectType, TotalAmount: 0, TotalHours: 0 }并将其赋值给aggregatedItems[ProjectType]。注意，这里的ProjectType属性是冗余的，但为了最终输出格式与期望匹配，我们将其包含。
4. aggregatedItems[ProjectType].TotalAmount += Amount; 和 aggregatedItems[ProjectType].TotalHours += Hours;：无论是新创建的条目还是已存在的条目，都将当前frame的Amount和Hours累加到对应的TotalAmount和TotalHours中。
5. const output = Object.values(aggregatedItems);：最后，Object.values()方法会返回aggregatedItems对象所有可枚举属性值的数组。这些值正是我们期望的按ProjectType分组并聚合后的对象数组。

注意事项与最佳实践

• 性能优势：这种基于对象哈希映射的方法在处理大数据量时表现出色。因为它对每个元素只进行一次查找（哈希表的查找时间复杂度通常为O(1)）和一次更新，总的时间复杂度接近O(N)，其中N是数组的长度。相比之下，如果使用reduce内部包含find（查找时间复杂度O(N)），则总时间复杂度可能达到O(N^2)。
• 键的唯一性：确保作为分组键的属性值（如ProjectType）是唯一的且可作为JavaScript对象键（字符串或Symbol）。
• 灵活性：此模式非常灵活，可以轻松扩展以计算其他聚合指标，例如平均值、计数、最大值、最小值等。只需在初始化和累加逻辑中添加相应的属性即可。
• 可读性：forEach循环结合条件判断的写法清晰直观，易于理解和维护。
• ReactJS环境：在ReactJS组件中使用此逻辑时，通常会在useEffect钩子中处理数据，或者将其封装成一个独立的工具函数，以确保数据在组件生命周期中正确地聚合和更新。

总结

在JavaScript和ReactJS中实现类似SQL GROUP BY和SUM的数据聚合功能，最有效的方法是利用JavaScript对象的哈希映射特性。通过迭代原始数组，将分组键作为中间对象的键，并累加相应的数值，最终将中间对象的值转换为目标数组，我们能够以高效、简洁的方式完成复杂的数据聚合任务。掌握这种模式对于处理前端数据尤其重要，能够显著提升应用程序的性能和代码质量。

终于介绍完啦！小伙伴们，这篇关于《JavaScript数组高效分组求和技巧》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！