JavaScript基于查找值实现二维数组指定列求和与字符串拼接

实现思路 #

先对第一个数组按ID做预聚合，提前计算好每个ID对应的数值总和、字符串拼接结果，再直接匹配到names数组即可，逻辑清晰易读，也方便排查问题。

完整实现代码 #

const array = [ 
  [1, 7, 'AAA'], 
  [2, 5, 'BBB'], 
  [3, 2, 'CCC'], 
  [4, 4, 'DDD'], 
  [4, 9, 'EEE'], 
  [4, 2, 'FFF'], 
  [5, 8, 'GGG'], 
  [6, 2, 'HHH']
];

const names = [
  [1, 'Joe'],
  [2, 'Dave'],
  [3, 'Mike'],
  [4, 'Sandra'],
  [5, 'Sue'],
  [6, 'Mary']
];

// 第一步：聚合array的统计结果
const aggMap = new Map();
for (const item of array) {
  const id = item[0];
  if (aggMap.has(id)) {
    const entry = aggMap.get(id);
    entry.total += item[1];
    entry.strings.push(item[2]);
  } else {
    aggMap.set(id, {
      total: item[1],
      strings: [item[2]]
    });
  }
}

// 第二步：匹配填充names数组
const result = names.map(nameEntry => {
  const id = nameEntry[0];
  const aggResult = aggMap.get(id);
  return [...nameEntry, aggResult.total, aggResult.strings.join(', ')];
});

console.log(result);

代码说明 #

• 预聚合环节用Map存储ID和对应统计结果的映射，避免重复遍历array数组，性能比双重循环更好
• 字符串拼接统一用Array.join(', ')方法，不管是单个还是多个字符串都能输出符合要求的格式，不需要额外做分支判断
• 用map生成新数组不会修改原names数组，如果需要直接修改原数组，可以把第二步替换为forEach遍历赋值即可

原有代码问题说明 #

你写的代码里存在两个核心问题：

1. 求和时调用array.reduce(sum,0)没有按ID过滤元素，会计算整个array的数值总和而不是对应ID的总和
2. 双重循环+每次都调用filter/map统计数量的逻辑冗余，性能损耗大，也容易出现逻辑判断错误

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