Array.prototype.reduce() 是前端按字段分组最轻量且无需依赖库的解法，返回以分组键为 key 的对象，需注意 key 类型安全、空分组处理及后续排序搜索应在数据层完成而非 DOM 层。
用 Array.prototype.reduce() 按字段分组最直接
前端拿到扁平数组（比如用户列表、订单记录），想按 status、category 或 date 归类，reduce() 是最轻量、无需依赖库的解法。它不改原数组，返回一个以分组键为 key 的对象。
常见错误是误用 map() 或 filter() 多次遍历——性能差，代码还容易漏掉空分组。
- 分组逻辑写在回调函数里，
acc[groupKey] = acc[groupKey] || []是防 undefined 的关键一行 - 注意 key 类型：数字 ID 直接用没问题，但时间戳或浮点数建议先
String()或取整，避免隐式类型转换导致分组错乱 - 如果后端返回的是嵌套结构（如
user.profile.type），提取 key 时别忘了做安全访问，比如(item.profile?.type || 'unknown')
const orders = [
{ id: 1, status: 'pending', amount: 99 },
{ id: 2, status: 'shipped', amount: 150 },
{ id: 3, status: 'pending', amount: 45 }
];
const grouped = orders.reduce((acc, item) => {
const key = item.status;
acc[key] = acc[key] || [];
acc[key].push(item);
return acc;
}, {}); // → { pending: [...], shipped: [...] }需要 DOM 动态渲染分组结果？别手写拼接 HTML 字符串
把分组后的数据塞进页面，很多人第一反应是 for...in 遍历对象 + innerHTML +=，这会导致重排重绘失控、XSS 风险、事件绑定困难。
更稳妥的做法是：用 Object.entries() 转成数组，再配合 map() 和 join() 生成结构化片段，最后一次性插入。
立即学习“前端免费学习笔记（深入）”；
-
Object.entries(grouped)返回[['pending', [...]], ['shipped', [...]]]，比for...in更可控 - 每个分组标题用语义化标签（如
<section>或带aria-labelledby的<div>），别只靠<h3>堆砌 - 如果某分组数据为空（比如
acc['cancelled'] = []），Object.entries()会跳过它——这是预期行为，不用额外过滤
const html = Object.entries(grouped)
.map(([status, items]) => `
<section class="group" data-status="${status}">
<h3>${status}</h3>
<ul>${items.map(i => `<li>#${i.id} - ¥${i.amount}</li>`).join('')} </ul>
</section>
`)
.join('');
document.getElementById('list').innerHTML = html;分组后还要排序或搜索？别在渲染层硬塞逻辑
用户点击“按金额降序”或输入关键词过滤某一分组，如果每次都在渲染后操作 DOM（比如用 querySelectorAll 找 .pending li 再排序），既慢又难维护。
正确顺序是：数据分组 → 分组内排序/过滤 → 生成新分组对象 → 渲染。所有逻辑保留在 JS 层，DOM 只负责呈现。
- 对每个分组子数组调用
sort()或filter()，不要试图在 HTML 字符串里用正则替换 - 如果搜索框要跨分组匹配（比如搜 “99” 显示所有含 99 的订单，不管状态），得先扁平化所有分组再筛，而不是分别筛再合并
- 频繁交互场景（如实时搜索）记得加防抖，否则
reduce()+sort()连续触发会卡顿
服务端已分好组？警惕 JSON 中的 key 顺序丢失
有些接口直接返回类似 {"pending": [...], "shipped": [...]} 的结构，看着省事，但 JavaScript 对象属性遍历顺序不保证（尤其 IE 或旧 Node.js）。你写的 for...in 可能在不同环境输出不同顺序。
解决方案很简单：服务端加一个 order 字段，或前端用 Object.keys() 手动指定顺序。
- 推荐做法：
const displayOrder = ['draft', 'pending', 'shipped', 'delivered'];，再用displayOrder.filter(key => grouped[key])控制渲染顺序 - 如果后端用 Python 字典或 Java LinkedHashMap，且明确声明了顺序，也要在前端加一层校验——毕竟传输过程可能被中间件篡改
- 别依赖
JSON.stringify()输出顺序来判断，那是序列化行为，和运行时对象遍历无关
分组本身不难，难的是分完之后怎么稳、怎么快、怎么不让后续需求（排序、搜索、服务端协作）变成补丁堆叠。关键动作就两个：数据层保持纯函数式处理，DOM 层只做单次、批量、语义化渲染。
