首页 > 网页制作 >按分类值分组对象生成变体数组结构

按分类值分组对象生成变体数组结构

来源：互联网 2026-06-24 08:22:01

使用reduce按分类字段分组，通过Object.keys().map()转换结构，取每组首个对象为主项，变体字段依据对象数量设为数组或null。整体时间复杂度O(n)，适用于商品管理、内容聚合等场景。

在日常开发中，经常需要将扁平数据按品类聚合，例如商品列表。目标是让同一品类的所有商品挂在第一个出现的商品下，形成“主商品+变体”结构。若品类只有一件商品，则变体字段设为null。虽然看似小事，但选择正确方法可显著提高效率。

下面介绍一套经过验证的两阶段处理方案，兼顾性能与可读性，适用于商品管理、内容聚合、配置分组等场景。

第一步：分组聚合（用 reduce 构建哈希映射）

以目标字段（例如 category）为键，遍历原始数组，将相同分类的对象收集到同一个数组中。这一步的时间复杂度为 O(n)，代码非常直观：

const grouped = products.reduce((acc, product) => {
  const { category } = product;
  if (!acc[category]) acc[category] = [];
  acc[category].push(product);
  return acc;
}, {});

第二步：结构转换（用 Object.keys().map() 生成最终结果）

拿到分组结果后，遍历每个分类键，提取该分类第一个对象的 position 和 category 作为主项信息，再根据该分类总对象数量决定 variants 的值——如果多于一个则将整个数组放入，否则设为 null。

const result = Object.keys(grouped).map(key => {
  const items = grouped[key];
  return {
    position: items[0].position,
    category: key,
    variants: items.length > 1  items : null
  };
});

用一个实际例子验证，结果符合预期：

const products = [
  { position: 1, category: "jeans" },
  { position: 2, category: "tees" },
  { position: 3, category: "dress" },
  { position: 4, category: "dress" },
  { position: 5, category: "dress" },
];
// 输出：
// [
//   { position: 1, category: "jeans", variants: null },
//   { position: 2, category: "tees", variants: null },
//   { position: 3, category: "dress", variants: [ { position:3, category:"dress" }, { position:4, category:"dress" }, { position:5, category:"dress" } ] }
// ]

关键注意事项

分组字段可扩展：如果业务需要按多个字段联合去重（例如 category + brand），只需将哈希表的键改为 "${category}-${brand}"，其余逻辑完全不变。
首项 position 只是示例：上述代码取了第一个对象的 position。如需取最小值或最大值，可替换为 Math.min(...items.map(p => p.position))，非常灵活。
空数组很安全：如果原始数组为空，Object.keys(grouped).map(...) 直接返回 []，无需额外判空。
variants: null 的设计：这种输出结构在模板渲染时非常方便，例如在 Vue/React 中用 v-if="item.variants" 直接控制变体区域的显示与隐藏。