如何基于指定属性合并对象数组中的元素并格式化标签字符串-js教程-PHP中文网

如何基于指定属性合并对象数组中的元素并格式化标签字符串

本文介绍如何在 JavaScript 中根据 paymentId 属性对对象数组进行分组合并，并将相同组的 label 值拼接为逗号分隔的字符串，最终生成结构清晰、符合业务需求的新数组。

本文介绍如何在 javascript 中根据 `paymentid` 属性对对象数组进行分组合并，并将相同组的 `label` 值拼接为逗号分隔的字符串，最终生成结构清晰、符合业务需求的新数组。

在实际开发中，我们常需对具有相同标识字段（如 paymentId）的对象进行聚合处理。例如，将多个订单项按支付 ID 归并，并将其 label 字段合并为单一字符串，以简化后续展示或导出逻辑。

以下是一个简洁、可读性强且兼容性良好的实现方案：

ViiTor AI

ViiTor AI是一款面向视频翻译、配音、口型同步和多语言内容本地化的 AI 视频工具。

下载

const data = [
  { label: 'General-A-5', paymentId: 1 },
  { label: 'General-A-4', paymentId: 1 },
  { label: 'General-A-3', paymentId: 2 }
];

const merged = [];
data.forEach(item => {
  const existing = merged.find(obj => obj.paymentId === item.paymentId);
  if (existing) {
    // 若已存在同 paymentId 的条目，则将 label 合并为逗号分隔字符串
    existing.label = Array.isArray(existing.label)
      ? [...existing.label, item.label].join(',')
      : `${existing.label},${item.label}`;
  } else {
    // 首次出现，直接添加新对象（label 保持原始字符串形式）
    merged.push({ ...item });
  }
});

console.log(merged);
// 输出：
// [
//   { label: 'General-A-5,General-A-4', paymentId: 1 },
//   { label: 'General-A-3', paymentId: 2 }
// ]

⚠️ 注意事项：

上述方法采用 Array.prototype.find() 实现线性查找，适用于中小型数据集（
初始 label 均为字符串，因此合并时统一使用字符串拼接而非数组暂存，避免冗余类型转换；
若原始数据中 label 可能为 null/undefined，应在拼接前做空值校验，例如：existing.label = [existing.label, item.label].filter(Boolean).join(',')；
如需保留原始 label 顺序（如按输入顺序拼接），当前 forEach 方式天然满足；若需按字母或数值排序后再合并，可在 .join() 前对标签数组调用 .sort()。

该方案无需引入外部库，纯原生 JavaScript 实现，语义清晰、易于维护，可直接集成至各类前端或 Node.js 项目中。