按唯一键分组累加值的JS教程

本文手把手教你用现代JavaScript高效实现二维数组按指定列（如产品编码）分组并累加对应数值——从常见错误（如误用indexOf导致覆盖而非累加）切入，剖析逻辑陷阱，再给出健壮、简洁的ES2020+解决方案：利用for...of遍历、Object.create(null)创建纯净对象、??=安全初始化及+=精准累加，最终生成如{ TCN0018: 500, TCN0019: 100 }的聚合结果；还贴心提醒空数组、字段缺失等边界处理，并延伸至多指标聚合的可扩展思路，堪称前端数据聚合的实用范本。

本文详解如何对二维数组按第二列（如 'TCN0018'）去重分组，并将对应第三列数值累加，最终生成键值对对象（如 { TCN0018: 500, TCN0019: 100 }），同时指出常见错误及现代、健壮的实现方案。

本文详解如何对二维数组按第二列（如 'TCN0018'）去重分组，并将对应第三列数值累加，最终生成键值对对象（如 `{ TCN0018: 500, TCN0019: 100 }`），同时指出常见错误及现代、健壮的实现方案。

在实际开发中，常需对结构化数组（如表格数据、API 响应）按某字段分组并聚合计算——例如按产品编码（'TCN0018'）归类，汇总其数量（第三列）。原始代码使用 indexOf 判断首次出现再赋值，但逻辑缺陷导致仅保留每组首个元素的值，而非累加和：amount 变量未在循环内按 key 动态维护，且 obj_product[values[i][1]] = amount 在每次迭代都覆盖，致使 'TCN0018' 最终被第二次循环中的 200（实为第一次的值）错误覆盖，而未叠加 300。

✅ 正确思路是：逐行遍历 → 提取分组键（第2列）与累加值（第3列）→ 若键首次出现则初始化为 0 → 然后执行累加。

以下是推荐的现代 JavaScript 实现（ES2020+）：

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); // 创建无原型的对象，避免属性冲突

for (const row of values) {
  const key = row[1];     // 分组依据：第二列（索引 1）
  const valueToSum = row[2]; // 待累加值：第三列（索引 2）

  result[key] ??= 0; // 空值合并操作符：若 result[key] 为 undefined，则设为 0
  result[key] += valueToSum;
}

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

? 关键改进点说明：

• 使用 for...of 替代传统 for 循环，语义更清晰，避免索引管理错误；
• Object.create(null) 创建纯净对象（无 toString、hasOwnProperty 等原型方法），防止意外键名冲突；
• ??=（空值合并赋值）安全初始化，比 result[key] = result[key] || 0 更准确（可正确处理 0、false 等 falsy 值）；
• 每次迭代独立处理当前行，result[key] += ... 确保累加而非覆盖。

⚠️ 注意事项：

• 若输入数组可能为空或某行长度不足（如 row[2] 不存在），建议增加校验：if (Array.isArray(row) && row.length > 2)；
• 如需兼容旧版浏览器（不支持 ??=），可替换为 result[key] = (result[key] || 0) + valueToSum；
• 进阶场景（如多列聚合、平均值、最大值等）可封装为通用 groupByReduce 工具函数。

该方案简洁、高效、可读性强，是处理此类「分组聚合」问题的标准实践。

好了，本文到此结束，带大家了解了《按唯一键分组累加值的JS教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！