React中合并相同GolonganName键的数组解决方案

问题背景 #

现有如下数组：

[
  { GolonganName: '3B - Niaga Besar', data: [ 172000 ] },
  { GolonganName: '3A - Niaga Kecil', data: [ 76700 ] },
  { GolonganName: '2B - Rumah Tangga Menengah', data: [ 57000 ] },
  { GolonganName: 'IA - Rumah Tangga', data: [ 272000 ] },
  { GolonganName: 'R5 - Instansi Pemerintah', data: [ 429300 ] },
  { GolonganName: '3B - Niaga Besar', data: [ 0 ] },
  { GolonganName: '3A - Niaga Kecil', data: [ 0 ] },
  { GolonganName: '2B - Rumah Tangga Menengah', data: [ 50200 ] },
  { GolonganName: 'IA - Rumah Tangga', data: [ 0 ] },
  { GolonganName: 'R5 - Instansi Pemerintah', data: [ 1467000 ] }
]

需要将拥有相同GolonganName的对象合并，把对应的data数组合并到同一个对象中，期望结果：

[
  { GolonganName: '3B - Niaga Besar', data: [ 172000, 0 ] },
  { GolonganName: '3A - Niaga Kecil', data: [ 76700, 0 ] },
  { GolonganName: '2B - Rumah Tangga Menengah', data: [ 57000, 50200 ] },
  { GolonganName: 'IA - Rumah Tangga', data: [ 272000, 0 ] },
  { GolonganName: 'R5 - Instansi Pemerintah', data: [ 429300, 1467000 ] }
]

尝试使用array.map实现但效果不理想，原代码如下：

let dataMap: any = seriesGolongan.map((item: any, i: any) => {  
  const length = responseBillingTarget.length;  
  let lenGol = responseGetGolongan.length;  
  for (let index = 0; index < responseGetGolongan.length; index++) {    
    const element = responseGetGolongan[index];    
    if (element.name == item.GolonganName) {      
      if (length == 2) {        
        resultGol.push({          
          GolonganName: item.GolonganName,          
          data: [parseInt(item.data)],        
        });      
      }    
    }  
  }
});

解决方案 #

核心思路 #

使用Array.reduce()进行分组聚合：

• 利用累加器（acc）存储已分组的对象，以GolonganName作为键
• 遍历原数组时，若当前GolonganName已存在于累加器中，就合并其data数组；若不存在，则初始化新对象存入累加器
• 最后用Object.values()将累加器的键值对转换为目标数组

实现代码 #

const originalData = [
  { GolonganName: '3B - Niaga Besar', data: [172000] },
  { GolonganName: '3A - Niaga Kecil', data: [76700] },
  { GolonganName: '2B - Rumah Tangga Menengah', data: [57000] },
  { GolonganName: 'IA - Rumah Tangga', data: [272000] },
  { GolonganName: 'R5 - Instansi Pemerintah', data: [429300] },
  { GolonganName: '3B - Niaga Besar', data: [0] },
  { GolonganName: '3A - Niaga Kecil', data: [0] },
  { GolonganName: '2B - Rumah Tangga Menengah', data: [50200] },
  { GolonganName: 'IA - Rumah Tangga', data: [0] },
  { GolonganName: 'R5 - Instansi Pemerintah', data: [1467000] }
];

const mergedData = Object.values(originalData.reduce((acc, item) => {
  // 检查当前分组是否已存在
  if (!acc[item.GolonganName]) {
    acc[item.GolonganName] = {
      GolonganName: item.GolonganName,
      data: []
    };
  }
  // 合并data数组（两种方式二选一即可）
  acc[item.GolonganName].data = acc[item.GolonganName].data.concat(item.data);
  // 或使用扩展运算符：acc[item.GolonganName].data = [...acc[item.GolonganName].data, ...item.data];
  
  return acc;
}, {} as Record<string, { GolonganName: string; data: number[] }>));

console.log(mergedData);

原代码问题分析 #

• map方法的特性是一对一转换，无法直接实现多对一的分组合并逻辑，不适合此类聚合场景
• 原代码嵌套循环且加入了length == 2的限制，逻辑冗余且未处理data数组的合并，仅重复创建新对象，导致无法达到预期效果

内容的提问来源于stack exchange，提问作者Fahri Abdurrachman