当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript按唯一键分组累加数组教程

JavaScript按唯一键分组累加数组教程

2026-05-21 21:01:23 0浏览收藏

本文深入解析了JavaScript中对二维数组按唯一键（如产品编号）高效分组并累加指定字段（如数量）的核心技巧，直击初学者常犯的“覆盖而非累加”逻辑错误，通过对比传统低效写法与现代简洁方案（如??=空值合并操作符、Object.create(null)构建纯净对象、for...of循环），不仅给出可直接复用的健壮代码，还揭示了时间复杂度从O(n²)降至O(n)的关键优化，并延伸至函数式reduce写法及多维聚合、条件过滤等实战扩展场景——无论你是处理CSV导出数据还是数据库查询结果，这都是一份即学即用、兼顾性能、安全与可维护性的前端数据聚合必备指南。

JavaScript 中按唯一键分组并累加数组元素的完整教程

本文讲解如何在 JavaScript 中对二维数组按指定列（如产品编号）进行分组，并对另一列（如数量）求和，最终生成键值对对象，同时指出常见错误及现代写法优化。

本文讲解如何在 JavaScript 中对二维数组按指定列（如产品编号）进行分组，并对另一列（如数量）求和，最终生成键值对对象，同时指出常见错误及现代写法优化。

在处理表格型数据（如导出的 CSV 或数据库查询结果）时，常需按某一字段（如商品编码 TCN0018）聚合其他字段（如数量）。你提供的原始代码逻辑存在关键缺陷：未对重复键执行累加，而是每次覆盖为当前行的值——导致 TCN0018 最终只保留第二行的 300（实际运行中因赋值顺序问题甚至只保留了首行 200），无法实现累计求和。

✅ 正确思路：分组 + 累加（Group & Reduce）

核心是识别「同一标识符可能多次出现」，因此需：

遍历每一行；
提取分组键（第 2 列，索引 1）和待累加值（第 3 列，索引 2）；
若该键首次出现，初始化为 0；否则在原有值基础上累加。

以下是推荐的现代、简洁且健壮的实现：

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

const result = Object.create(null); // 创建无原型的对象，避免 hasOwnProperty 冲突

for (const row of values) {
  const key = row[1];      // 分组依据：'TCN0018', 'TCN0019'
  const amount = row[2];   // 待累加值：200, 300, 100

  result[key] ??= 0;      // 空值合并操作符：仅当 result[key] 为 null/undefined 时设为 0
  result[key] += amount;
}

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

? 关键改进点解析

原代码问题	优化方案	说明
手动维护 product_id 数组和 amount 变量	使用 ??= 初始化 + 直接累加	消除状态耦合，逻辑内聚于单次循环
indexOf() 查重低效（O(n²)）	借助对象属性天然去重（O(1) 访问）	时间复杂度从 O(n²) 降至 O(n)
使用普通 {} 可能继承原型链方法	Object.create(null)	避免 toString、constructor 等意外属性干扰，更安全

? 进阶可选：函数式写法（一行式 reduce）

若偏好函数式风格，也可用 reduce 实现（语义清晰，但稍重）：

const result = values.reduce((acc, row) => {
  const [ , key, amount ] = row; // 解构：忽略第1项，取第2、3项
  acc[key] = (acc[key] || 0) + amount;
  return acc;
}, Object.create(null));