如何使用JavaScript过滤数组中非唯一值并合并重复项？

需求说明：根据数组对象的section字段判断重复项，将重复项的description字段合并为逗号分隔的字符串，保留第一个重复项的其他属性；非重复项直接保留。

原始数组 #

const originalArray = [
  {
    "id": 1,
    "CreatedDate": "2022-07-15 16:08",
    "description": "dddd ",
    "section": "Apple"
  },
  {
    "id": 2,
    "CreatedDate": "2022-07-15 16:08",
    "description": "ddd",
    "section": "Apple"
  },
  {
    "id": 3,
    "CreatedDate": "2022-07-15 16:08",
    "name": "aaa",
    "section": "orange"
  }
];

实现代码 #

const mergedArray = Object.values(
  originalArray.reduce((grouped, item) => {
    const key = item.section;
    if (!grouped[key]) {
      // 首次遇到该section，创建对象副本存入分组
      grouped[key] = {...item};
      // 清理description首尾空格，避免合并后出现多余空格
      if (grouped[key].description) {
        grouped[key].description = grouped[key].description.trim();
      }
    } else {
      // 已有该section，合并description字段
      if (item.description) {
        grouped[key].description += `, ${item.description.trim()}`;
      }
    }
    return grouped;
  }, {})
);

处理结果 #

console.log(mergedArray);
// 输出：
[
  {
    "id": 1,
    "CreatedDate": "2022-07-15 16:08",
    "description": "dddd, ddd",
    "section": "Apple"
  },
  {
    "id": 3,
    "CreatedDate": "2022-07-15 16:08",
    "name": "aaa",
    "section": "orange"
  }
]

代码逻辑说明 #

1. 分组存储：用对象grouped以section为键存储分组结果，确保同一section的项仅保留一个实例。
2. 首次处理：遇到新的section时，通过{...item}创建原对象副本，避免后续修改影响原数组，同时清理description的首尾空格。
3. 合并字段：遇到重复section时，将当前项的description清理空格后追加到已有项的对应字段中，用逗号分隔。
4. 转换结果：最后用Object.values()将分组对象转为数组，得到最终合并结果。

注：示例期望结果中orange项的id为2属于笔误，按逻辑会保留原数组中该section首次出现项的id（即3），若需自定义保留的字段值，可修改首次存入分组时的赋值逻辑。

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