如何在JavaScript中移除对象数组内GroupedServices子数组的重复项（基于Id字段去重）

你遇到的问题主要有两个：一是没遍历主数组里的每个对象来处理对应的GroupedServices子数组，二是直接调用filteredSerivces.GroupedServices()导致报错（因为filteredSerivces是数组，根本没有这个方法）。

要实现按Id移除GroupedServices里的重复项，并且保留第一个出现的条目，可以这样做：

解决方案代码 #

function display_message() { 
  let filteredSerivces = [ 
    { 
      "ServiceTypeId": 805, 
      "ServiceTypeName": "Custom Services 1", 
      "GroupedServices": [ 
        { "Id": 5247, "ServiceTypeId": 805, "ServiceName": "Some service A2", "Name": "A1", "Duration": 30, "DurationForClient": 30, "Order": 4, "EmployeeId": 3683 }, 
        { "Id": 5254, "ServiceTypeId": 805, "ServiceName": "Some service A2", "Name": "A2", "Duration": 30, "DurationForClient": 30, "Order": 4, "EmployeeId": 3683 }, 
        { "Id": 5254, "ServiceTypeId": 805, "ServiceName": "Some service A6", "Name": "A2", "Duration": 30, "DurationForClient": 30, "Order": 4, "EmployeeId": 3684 } 
      ], 
      "Order": 4 
    }, 
    { 
      "ServiceTypeId": 804, 
      "ServiceTypeName": "Custom Services 2", 
      "GroupedServices": [ 
        { "Id": 5246, "ServiceTypeId": 804, "ServiceName": "Some service B1", "Name": "B1", "Duration": 30, "DurationForClient": 30, "Order": 5, "EmployeeId": 3696 }, 
        { "Id": 5248, "ServiceTypeId": 804, "ServiceName": "Some service B2", "Name": "B2", "Duration": 30, "DurationForClient": 30, "Order": 5, "EmployeeId": 3700 }, 
        { "Id": 5248, "ServiceTypeId": 804, "ServiceName": "Some service B2", "Name": "B2", "Duration": 30, "DurationForClient": 30, "Order": 5, "EmployeeId": 3683 } 
      ], 
      "Order": 5 
    } 
  ];

  // 处理每个主数组对象，对GroupedServices按Id去重
  const processedServices = filteredSerivces.map(service => {
    // 使用Map记录已出现的Id，确保只保留第一个出现的对象
    const uniqueGroups = Array.from(
      service.GroupedServices.reduce((map, item) => {
        // 只有当Map中没有当前Id时才添加，避免覆盖第一个条目
        if (!map.has(item.Id)) {
          map.set(item.Id, item);
        }
        return map;
      }, new Map()).values()
    );

    // 返回新的对象，替换去重后的GroupedServices
    return { ...service, GroupedServices: uniqueGroups };
  });

  console.log(processedServices);
}

关键步骤解释 #

1. 遍历主数组：用map方法遍历filteredSerivces里的每个服务对象，确保每个对象的GroupedServices都被单独处理。
2. 用Map去重：
   • reduce遍历子数组的每个元素，用Map的键存储Id，值存储对应的对象。
   • 判断Map中是否已存在当前Id，不存在才添加，这样就能保留第一个出现的条目，后续重复的Id会被直接跳过。
3. 生成新数组：用Array.from()把Map的values转换成普通数组，得到去重后的GroupedServices。
4. 返回新对象：用扩展运算符...复制原服务对象的所有属性，仅替换GroupedServices为去重后的数组，避免直接修改原数组导致的副作用。

这样处理后，每个GroupedServices子数组里只会保留每个Id对应的第一个对象，完全符合你的需求。

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