如何在JavaScript中按Label合并对象的data子数组

核心思路 #

按label字段对数组对象分组，将相同客户的data数组对应位置的数值累加，最终输出合并后的数组。

代码实现（JavaScript） #

const inputData = [
  {"color": "#009192","data": [0, 0, 57.62, 0, 0, 0, 0, 0, 0, 0, 0, 0],"label": "Client 1"},
  {"color": "#009192","data": [0, 0, 234.65, 0, 0, 0, 0, 0, 0, 0, 0, 0],"label": "Client 2"},
  {"color": "#009192","data": [0, 0, 490.43, 0, 0, 0, 0, 0, 0, 0, 0, 0],"label": "Client 3"},
  {"color": "#009192","data": [0, 0, 0, 94.00, 0, 0, 0, 0, 0, 0, 0, 0],"label": "Client 1"}
];

// 分组合并逻辑
const mergedData = Object.values(inputData.reduce((acc, current) => {
  if (acc[current.label]) {
    // 累加对应月份的数据
    acc[current.label].data = acc[current.label].data.map((val, idx) => val + current.data[idx]);
  } else {
    // 首次出现的客户，浅拷贝对象存入累加器
    acc[current.label] = {...current};
  }
  return acc;
}, {}));

console.log(mergedData);

关键细节说明 #

• 分组逻辑：用Array.prototype.reduce构建以label为键的临时对象，实现客户的快速分组。
• 数据累加：通过Array.prototype.map遍历data数组，将相同索引位置的数值相加，保证月度数据对应合并。
• 避免原数据污染：用对象展开运算符{...current}浅拷贝原对象，防止后续修改影响原始输入数据。
• 结果转换：通过Object.values将分组对象转换为数组，得到符合要求的输出格式。

注：如果存在同一label对应不同color的场景，可根据业务需求调整（例如保留首次出现的color、统一设置固定值等）。

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