
本文介绍如何使用 JavaScript 将原始数组中具有相同 title 和 sku 的对象聚合为新数组,把重复项的 size 字段合并为逗号分隔字符串。
本文介绍如何使用 javascript 将原始数组中具有相同 title 和 sku 的对象聚合为新数组,把重复项的 size 字段合并为逗号分隔字符串。
在电商或商品管理类应用中,常会遇到“同一款商品多个尺码分散为多条记录”的场景。例如,一双 Nike Dunk Low Panda 有 9 US、10 US、11 US 三种尺码,原始数据以三条独立对象形式存在;而展示或导出时,往往需要将其合并为一条,其中 size 字段为 '9 US, 10 US, 11 US'。这种「按关键字段分组 + 字段聚合」是前端数据处理的典型需求。
实现该逻辑最清晰、高效的方式是借助 Map 对象进行键值映射:以 title 和 sku 的组合为唯一键(如 'Nike Dunk Low Panda-DD1391-100'),值为聚合后的对象。遍历原始数组时,若键已存在,则追加尺寸;否则新建条目。
以下是完整可运行示例:
const originalData = [
{ title: 'Nike Dunk Low Panda', sku: 'DD1391-100', size: '9 US' },
{ title: 'Nike Dunk Low Panda', sku: 'DD1391-100', size: '10 US' },
{ title: 'Nike Dunk Low Panda', sku: 'DD1391-100', size: '11 US' },
{ title: 'Adidas Samba Classic', sku: 'GW7554', size: '8.5 US' },
{ title: 'Adidas Samba Classic', sku: 'GW7554', size: '9 US' },
];
const aggregatedMap = new Map();
originalData.forEach(item => {
const key = `${item.title}-${item.sku}`;
if (aggregatedMap.has(key)) {
// 已存在:追加尺寸,注意避免开头多余逗号
const existing = aggregatedMap.get(key);
existing.size += `, ${item.size}`;
} else {
// 首次出现:创建新对象并存入 Map
aggregatedMap.set(key, {
title: item.title,
sku: item.sku,
size: item.size
});
}
});
const result = Array.from(aggregatedMap.values());
console.log(result);
// 输出:
// [
// { title: 'Nike Dunk Low Panda', sku: 'DD1391-100', size: '9 US, 10 US, 11 US' },
// { title: 'Adidas Samba Classic', sku: 'GW7554', size: '8.5 US, 9 US' }
// ]✅ 注意事项与优化建议:
-
键构造安全:若
title或sku可能含-或特殊字符,建议改用更健壮的键生成方式(如 JSON.stringify([item.title, item.sku])),避免冲突; -
空值防护:生产环境应增加
item.title && item.sku判空,防止undefined导致错误键; -
扩展性:如需聚合其他字段(如价格范围、库存总和),只需在
else分支初始化对应属性,并在if分支中累加即可; -
替代方案:也可用
reduce()实现,但Map在多次查找/更新场景下语义更清晰、性能更优(O(1) 查找)。
掌握此类数组聚合模式,不仅能解决尺寸合并问题,更是构建筛选器、分组统计、去重归并等通用数据处理能力的基础。

















