不使用Lodash，如何按category键合并嵌套产品对象数组？

从API获取了一组产品数据对象，每个JSON对象代表一件独立产品。由于单个产品可归属多个类别和子类别，数据中存在重复的类别与子类别信息：

{"category":"e-liquid","subcategories":[{"attributes":{"name":"50ml","id":19}},{"attributes":{"name":"100ml","id":18}}]}
{"category":"e-liquid","subcategories":[{"attributes":{"name":"50ml","id":19}},{"attributes":{"name":"100ml","id":18}}]}
{"category":"e-liquid","subcategories":[{"attributes":{"name":"50ml","id":19}}]}
{"category":"hardware","subcategories":[{"attributes":{"name":"tanks","id":15}}]}
{"category":"hardware","subcategories":[{"attributes":{"name":"tanks","id":15}},{"attributes":{"name":"coils","id":14}}]}

需要按category键（如e-liquid、hardware）去重合并所有子类别，最终得到如下结构的结果：

{"category":"e-liquid","subcategories":["50ml","100ml","150ml","200ml","...anything else"]}
{"category":"hardware","subcategories":["coils","tanks","batteries","...whatever else"]}

已在Stack Overflow搜索相关方案，但现有方案多为浅合并无法满足需求，且Nuxt配置中Lodash无法正常使用，需不依赖Lodash的实现方法。

使用原生JavaScript的Set自动去重特性，搭配对象分组的方式实现需求，代码如下：

// 假设products是从API获取的产品数组
const products = [
  {"category":"e-liquid","subcategories":[{"attributes":{"name":"50ml","id":19}},{"attributes":{"name":"100ml","id":18}}]},
  {"category":"e-liquid","subcategories":[{"attributes":{"name":"50ml","id":19}},{"attributes":{"name":"100ml","id":18}}]},
  {"category":"e-liquid","subcategories":[{"attributes":{"name":"50ml","id":19}}]},
  {"category":"hardware","subcategories":[{"attributes":{"name":"tanks","id":15}}]},
  {"category":"hardware","subcategories":[{"attributes":{"name":"tanks","id":15}},{"attributes":{"name":"coils","id":14}}]}
];

// 临时对象，用于按category分组存储子类别（Set自动去重）
const categoryGroup = {};

// 遍历所有产品
products.forEach(item => {
  const { category, subcategories } = item;
  // 初始化当前类别的Set
  if (!categoryGroup[category]) {
    categoryGroup[category] = new Set();
  }
  // 提取子类别名称并加入Set
  subcategories.forEach(sub => {
    categoryGroup[category].add(sub.attributes.name);
  });
});

// 转换为目标格式的数组
const mergedResult = Object.entries(categoryGroup).map(([cat, subSet]) => ({
  category: cat,
  subcategories: Array.from(subSet)
}));

console.log(mergedResult);

代码说明 #

1. 分组存储：用categoryGroup对象按类别键名分组，每个类别对应一个Set，利用Set的特性自动过滤重复的子类别名称。
2. 遍历提取：两次遍历分别处理产品和子类别，提取需要的子类别名称并加入对应类别的Set。
3. 格式转换：通过Object.entries将分组对象转为键值对数组，再映射为需求的JSON结构，Array.from(subSet)把Set转为普通数组。

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