
本文介绍一种高效、可读性强的 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
一款AI工具,主要用于产品经理技能,适用于 Claude Code、Codex、Cursor 和 Windsurf。涵盖 SaaS 指标诊断、PRD 评审、路线图规划、需求探索,以及面向产品经理的职业转型辅导等,适合需要提升相关任务效率的用户。
// 方案一:使用 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 数量,兼顾性能与可维护性,适用于中大型购物车数据处理。










