如何按colors属性合并JavaScript对象数组，将其余属性存入info数组？

需求说明 #

给定以下对象数组：

const array = [
    { price: 27, colors: "BLACK", size: "S" },
    { price: 23, colors: "GREEN", size: "S" },
    { price: 0, colors: "GREEN", size: "M" },
    { price: 0, colors: "OLIVE", size: "S" },
    { price: 65, colors: "RED", size: "S" },
    { price: 12, colors: "RED", size: "M" },
    { price: 12, colors: "BLACK", size: "L" },
    { price: 34, colors: "RED", size: "L" },
    { price: 43, colors: "OLIVE", size: "M" },
    { price: 23, colors: "OLIVE", size: "L" },
    { price: 34, colors: "GREEN", size: "L" }
];

需要按colors属性分组合并，每个分组对象保留colors，将对应的price和size存入info数组，最终得到：

[
    { colors: "BLACK", info: [{ size: "S", price: 27 }, { size: "L", price: 12 }] },
    { colors: "GREEN", info: [{ size: "S", price: 23 }, { size: "M", price: 0 }, { size: "L", price: 34 }] },
    { colors: "RED", info: [{ size: "S", price: 65 }, { size: "M", price: 12 }, { size: "L", price: 34 }] },
    { colors: "OLIVE", info: [{ size: "S", price: 0 }, { size: "M", price: 43 }, { size: "L", price: 23 }] }
]

实现方案 #

方案一：使用Array.reduce（高效推荐）

这是性能最优的方案，仅需遍历一次原数组：

const mergedArray = Object.values(array.reduce((grouped, item) => {
    // 解构分离colors和其他属性
    const { colors, ...details } = item;
    // 如果当前颜色未分组，初始化分组对象
    if (!grouped[colors]) {
        grouped[colors] = { colors, info: [] };
    }
    // 将当前项的细节推入对应分组的info数组
    grouped[colors].info.push(details);
    return grouped;
}, {}));

console.log(mergedArray);

方案二：先取唯一颜色再过滤映射

逻辑更直观，适合理解基础分组逻辑：

// 获取所有不重复的颜色值
const uniqueColors = [...new Set(array.map(item => item.colors))];

const mergedArray = uniqueColors.map(color => ({
    colors: color,
    // 过滤出当前颜色的所有项，再去掉colors字段存入info
    info: array.filter(item => item.colors === color).map(({ colors, ...rest }) => rest)
}));

console.log(mergedArray);

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