本文介绍如何使用 javascript 的 map 对象，将原始数组中具有相同 title 和 sku 的多个对象按尺码（size）字段聚合，生成一个新数组，其中每个商品仅保留一条记录，其 size 字段为所有对应尺码的逗号分隔字符串。
本文介绍如何使用 javascript 的 map 对象，将原始数组中具有相同 title 和 sku 的多个对象按尺码（size）字段聚合，生成一个新数组，其中每个商品仅保留一条记录，其 size 字段为所有对应尺码的逗号分隔字符串。
在实际开发中（例如电商商品列表处理），我们常遇到“同一商品多个尺码分散为多条记录”的数据结构，而展示层往往需要将其归并为一条——即保留 title 和 sku 不变，将所有 size 合并为一个字符串。这种转换属于典型的按复合键分组聚合操作。
下面是一个清晰、可复用的实现方案：
✅ 核心思路
- 使用
Map以title-sku拼接字符串作为唯一键，避免重复； - 遍历原始数组，对每项检查键是否存在：
- 若存在 → 追加当前
size到已有size字符串（用", "分隔）； - 若不存在 → 创建新对象并存入 Map；
- 若存在 → 追加当前
- 最后调用
Array.from(map.values())获取聚合后的数组。
? 示例代码
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: 'GW7552', size: '8.5 US' },
{ title: 'Adidas Samba Classic', sku: 'GW7552', 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 {
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: 'GW7552', size: '8.5 US, 9 US' }
// ]
⚠️ 注意事项
-
键的健壮性：若
title或sku可能含-或特殊字符，建议改用更安全的键生成方式（如 JSON.stringify([item.title, item.sku])），避免冲突； -
空值防护：生产环境建议增加
item.title && item.sku判空逻辑； -
性能考量：该方案时间复杂度为 O(n)，适用于数千条以内数据；超大数据量可考虑
reduce()配合对象字面量，但 Map 在键唯一性与可读性上更具优势； -
扩展性提示：如需同时聚合其他字段（如 price 范围、库存总和等），可在
else分支中初始化对应属性，并在if分支中更新。
掌握这一模式，不仅能解决尺码合并问题，还可轻松迁移到颜色、版本、地区等多维属性的分组聚合场景——是前端数据处理的必备基础技能之一。
