如何对数组中同值对象分组，生成含variants字段的结果数组

核心思路 #

先按目标字段的值把对象分组，再对每个分组做处理：单个对象的分组给对象加variants: null；多个对象的分组取第一个对象作为主体，variants字段存入整个分组的数组。

通用代码实现 #

如果需要动态指定分组字段（对应“预先未知的值”的需求），可以写成可复用函数：

const products = [
  { position: 1, category: "jeans" },
  { position: 2, category: "tees" },
  { position: 3, category: "dress" },
  { position: 4, category: "dress" },
  { position: 5, category: "dress" },
];

function groupAndAddVariants(arr, groupField) {
  // 按指定字段分组
  const groups = {};
  arr.forEach(item => {
    const key = item[groupField];
    if (!groups[key]) {
      groups[key] = [];
    }
    groups[key].push(item);
  });

  // 转换为目标格式
  return Object.values(groups).map(group => {
    // 浅拷贝原对象，避免修改原数据
    const targetItem = {...group[0]};
    targetItem.variants = group.length > 1 ? group : null;
    return targetItem;
  });
}

// 调用函数，传入原数组和分组字段
const output = groupAndAddVariants(products, 'category');
console.log(output);

代码说明 #

1. 分组阶段：遍历原数组，以指定字段的值为键，把同值对象归入同一个数组，最终得到以字段值为键的分组对象。
2. 转换阶段：遍历所有分组，对每个分组：
   • 浅拷贝分组的第一个对象作为基础（防止污染原数组数据）
   • 根据分组长度设置variants：长度大于1时存入整个分组数组，否则设为null
3. 最终返回的数组就是符合要求的结果。

如果是固定字段的场景，直接把groupField换成具体字段名（比如category）即可。

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