JavaScript按唯一值过滤数组并求和的问题及代码优化

需求与现有问题 #

给定如下二维数组：

let values = [
  [ 6285646346643, 'TCN0018', 200, 2000, 5000, 4000 ],
  [ 6285646346644, 'TCN0018', 300, 2000, 5000, 3000 ],
  [ 6285646346645, 'TCN0019', 100, 1000, 5000, 4000 ]
];

需要按第二列的TCNXXX唯一值分组，对第三列的值求和，期望结果为：

{ TCN0018: 500, TCN0019: 100 }

现有代码运行后实际结果为{ TCN0018: 200, TCN0019: 100 }，未实现正确累加：

let values = [
  [ 6285646346643, 'TCN0018', 200, 2000, 5000, 4000 ],
  [ 6285646346644, 'TCN0018', 300, 2000, 5000, 3000 ],
  [ 6285646346645, 'TCN0019', 100, 1000, 5000, 4000 ]
];

let product_id = [];
let obj_product = {};
let amount = 0;
for(let i = 0; i < values.length; i++)
{
    if(product_id.indexOf(values[i][1]) === -1)
    {
        console.log(values[i][2])
        product_id.push(values[i][1]);
        amount = values[i][2];
    }    
    obj_product[values[i][1]] = amount;
}

console.log(obj_product);

问题分析 #

现有代码的核心问题：

• 仅在首次遇到TCNXXX时初始化amount，后续遇到相同ID时未执行累加操作，导致重复ID的第三列值无法求和
• 使用数组product_id存储已出现的ID，通过indexOf查找的时间复杂度为O(n)，数据量大时效率较低

修正与优化方案 #

方案1：改进循环逻辑（兼容旧环境） #

直接修改现有循环，去掉冗余的product_id数组，通过判断目标对象中是否已存在当前ID来处理累加：

let values = [
  [ 6285646346643, 'TCN0018', 200, 2000, 5000, 4000 ],
  [ 6285646346644, 'TCN0018', 300, 2000, 5000, 3000 ],
  [ 6285646346645, 'TCN0019', 100, 1000, 5000, 4000 ]
];

let obj_product = {};
for (let i = 0; i < values.length; i++) {
  const id = values[i][1];
  const num = values[i][2];
  // 如果对象中已有该ID，就累加，否则初始化
  obj_product[id] = (obj_product[id] || 0) + num;
}

console.log(obj_product); // 输出 { TCN0018: 500, TCN0019: 100 }

方案2：使用Array.reduce（更简洁的现代写法） #

利用数组的reduce方法，一行逻辑完成分组求和，代码更简洁易读：

let values = [
  [ 6285646346643, 'TCN0018', 200, 2000, 5000, 4000 ],
  [ 6285646346644, 'TCN0018', 300, 2000, 5000, 3000 ],
  [ 6285646346645, 'TCN0019', 100, 1000, 5000, 4000 ]
];

const result = values.reduce((acc, curr) => {
  const id = curr[1];
  acc[id] = (acc[id] || 0) + curr[2];
  return acc;
}, {});

console.log(result); // 输出 { TCN0018: 500, TCN0019: 100 }

优化点总结 #

• 移除冗余的product_id数组，直接通过目标对象的属性判断是否已存在ID，查找效率提升至O(1)
• 实现正确的累加逻辑，确保重复ID的第三列值被求和
• 使用reduce方法可以让代码更简洁、语义化，符合现代JavaScript写法

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