怎样将有相同分类值的对象分组并生成带变体数组的结果结构

本文介绍一种高效的数据分组方法：遍历原始对象数组，按指定字段（如 category）聚合同类项，并为每个唯一分类生成一个主对象，其 variants 字段包含所有匹配对象组成的数组（若仅一项则设为 null）。

本文介绍一种高效的数据分组方法：遍历原始对象数组，按指定字段（如 category）聚合同类项，并为每个唯一分类生成一个主对象，其 `variants` 字段包含所有匹配对象组成的数组（若仅一项则设为 `null``。

在实际开发中，我们常需对扁平数据进行逻辑聚合——例如商品列表中按品类归类，将重复品类的所有条目作为“变体”挂载到首个出现的代表项上。核心目标是：保留每个唯一分类的首条记录作为主项，同时将其全部同分类对象（含自身）收集至 variants 数组；若该分类仅出现一次，则 variants 为 null。

实现该逻辑推荐使用两阶段处理：

1. 分组聚合（reduce）：以目标字段（如 category）为键，构建哈希映射，值为对应对象数组；
2. 结构转换（Object.keys().map()）：遍历分组结果，为每个键生成标准化输出对象，提取首项的 position 和 category，并根据数组长度决定 variants 值。

以下是完整、健壮的实现代码（已优化可读性与边界兼容性）：

const products = [  { position: 1, category: "jeans" },  { position: 2, category: "tees" },  { position: 3, category: "dress" },  { position: 4, category: "dress" },  { position: 5, category: "dress" },];// 阶段一：按 category 分组const grouped = products.reduce((acc, product) => {  const { category } = product;  if (!acc[category]) acc[category] = [];  acc[category].push(product);  return acc;}, {});// 阶段二：构造最终结果数组const result = Object.keys(grouped).map(key => {  const items = grouped[key];  return {    position: items[0].position,    category: key,    variants: items.length > 1 ? items : null  };});console.log(result);// 输出符合预期的嵌套结构

✅ 关键注意事项：

• 此方案假设 category 是唯一分组依据；如需多字段联合去重（如 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" 控制变体区块显示）。

该模式兼具性能（单次遍历 + 哈希查找 O(n)）与可维护性，适用于商品管理、内容聚合、配置分组等多种场景。