本文介绍一种高效、可读性强的 JavaScript 方法，用于按 ID 统计对象重复次数、保留首次出现的名称，并按 ID 降序生成如 "2x Banana, 1x Apple, 2x Strawberry" 的格式化字符串。
本文介绍一种高效、可读性强的 javascript 方法，用于按 id 统计对象重复次数、保留首次出现的名称，并按 id 降序生成如 `"2x banana, 1x apple, 2x strawberry"` 的格式化字符串。
在电商或购物车类场景中，常需将多个相同 ID 的商品聚合展示（如多件同款香蕉），而非简单去重或遍历计数。核心需求有三点：按 ID 聚合计数、以首次出现的 name 为准、结果按 ID 从高到低排序并格式化为自然语言字符串。以下为推荐实现方案：
✅ 推荐实现（现代语法，不修改原数组）
const data = [
{ "id": 5, "name": "banana" },
{ "id": 5, "name": "banana" },
{ "id": 4, "name": "apple" },
{ "id": 1, "name": "strawberry" },
{ "id": 1, "name": "strawberry" }
];
// 首字母大写工具函数
const capitalise = (str) => str.replace(/\b[a-z]/g, c => c.toUpperCase());
// 主逻辑：排序 → 聚合 → 格式化
const result = data
.toSorted((a, b) => b.id - a.id) // ✅ ES2023: 安全排序，不修改原数组
.reduce((acc, { id, name }) => {
// 若该 id 尚未存在，初始化为首次出现的 name + count=0
acc[id] ??= { name, count: 0 };
acc[id].count++;
return acc;
}, {})
.values() // 获取所有聚合后的 {name, count} 对象
.map(({ name, count }) => `${count}x ${capitalise(name)}`)
.join(", ");
console.log(result); // "2x Banana, 1x Apple, 2x Strawberry"⚠️ 兼容性处理（旧环境支持）
Array.prototype.toSorted() 在部分旧浏览器（如 Safari < 16.4）中不可用。若需兼容，可替换为：
// 方案一：使用 slice() 创建副本再 sort（推荐） [...data].sort((a, b) => b.id - a.id) // 方案二：使用 slice(0)（等效） data.slice(0).sort((a, b) => b.id - a.id)
⚠️ 注意：直接调用 data.sort() 会修改原始数组，在状态敏感场景（如 React state）中应避免。
? 关键设计说明
- ID 唯一性保障：使用 Map 或普通对象（如上例的 acc[id]）按 ID 聚合，天然忽略 name 差异，确保“同 ID 即同商品”；
- 名称一致性：通过 ??=（空值合并）仅在首次遇到某 ID 时记录 name，后续重复项只增 count，避免名称覆盖风险；
- 排序稳定性：toSorted() 或 slice().sort() 确保输出顺序严格按 ID 降序，符合“最高 ID 优先”要求；
- 可扩展性：若需支持更多字段（如单价、图片），可在 acc[id] 初始化时一并存入首条数据的完整对象。
此方案时间复杂度为 O(n log n)（主要由排序决定），空间复杂度 O(k)，k 为唯一 ID 数量，兼顾性能与可维护性，适用于中大型购物车数据处理。
