React数组按grouptype合并servicetype的实现求助

你可以通过Array.reduce()完成分组合并，核心是按grouptype作为分组键，累计合并对应项的servicetype列表，同时处理id的保留逻辑（仅当分组唯一时保留id）。

完整代码 #

const locationss = [
  {
    grouptype: "Name1",
    id: "1",
    servicetype: [
      { name: "Morning", price: "5" },
      { name: "Afternoon", price: "5" },
      { name: "Full Day", price: "5" },
    ],
  },
  {
    grouptype: "Name1",
    id: "2",
    servicetype: [
      { name: "Morning1", price: "5" },
      { name: "Afternoon1", price: "5" },
      { name: "Full Day1", price: "5" },
    ],
  },
  {
    grouptype: "Name2",
    id: "3",
    servicetype: [
      { name: "Morning", price: "5" },
      { name: "Afternoon", price: "5" },
    ],
  },
];

const mergedResult = Object.values(locationss.reduce((acc, current) => {
  const groupKey = current.grouptype;
  
  if (!acc[groupKey]) {
    // 首次遇到该分组，初始化结构并保留id
    acc[groupKey] = {
      grouptype: groupKey,
      id: current.id,
      servicetype: [...current.servicetype]
    };
  } else {
    // 分组已存在，合并servicetype并移除id（多实例id无意义）
    acc[groupKey].servicetype.push(...current.servicetype);
    delete acc[groupKey].id;
  }
  
  return acc;
}, {}));

console.log(mergedResult);

输出结果 #

[
  {
    "grouptype": "Name1",
    "servicetype": [
      { "name": "Morning", "price": "5" },
      { "name": "Afternoon", "price": "5" },
      { "name": "Full Day", "price": "5" },
      { "name": "Morning1", "price": "5" },
      { "name": "Afternoon1", "price": "5" },
      { "name": "Full Day1", "price": "5" }
    ]
  },
  {
    "grouptype": "Name2",
    "id": "3",
    "servicetype": [
      { "name": "Morning", "price": "5" },
      { "name": "Afternoon", "price": "5" }
    ]
  }
]

逻辑说明 #

• 分组初始化：当遍历到新的grouptype时，在累计器中创建对应的条目，复制当前项的grouptype、id和servicetype数组。
• 合并服务类型：如果当前grouptype已存在，就将当前项的servicetype数组展开后追加到已有数组中，同时删除id（因为同一分组下有多个不同id，保留无意义）。
• 转换结果结构：最后用Object.values()将累计器的键值对转为数组，完全匹配你需要的输出格式。

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