本文介绍如何利用现代 JavaScript 的 Object.groupBy 方法，将对象数组按公共字段（如 box）分组，并转换为包含 number 和 contents 的嵌套结构，满足自定义输出格式需求。
本文介绍如何利用现代 javascript 的 `object.groupby` 方法，将对象数组按公共字段（如 box）分组，并转换为包含 `number` 和 `contents` 的嵌套结构，满足自定义输出格式需求。
在实际开发中，常需对扁平的对象数组进行逻辑聚合——例如按“箱号”（box）归类商品信息，并生成结构清晰的嵌套数据。原始数组中每个对象含 box、product、color 字段，目标是将其重组为一个以 "box" 为键、值为包含 number（原 box 值）和 contents（剔除 box 后的子对象数组）的对象数组。
推荐使用原生 Object.groupBy()（ES2024 标准，Chrome 117+、Firefox 120+、Safari 17.4+ 已支持），它专为此类分组场景设计，语义清晰且性能优良：
const a = [
{ "box":"1", "product":"Pen", "color":"White" },
{ "box":"1", "product":"Pencil", "color":"Blue" },
{ "box":"1", "product":"Marker", "color":"Red" },
{ "box":"2", "product":"Paper", "color":"White"},
{ "box":"2", "product":"GlossPaper", "color":"Yellow"},
{ "box":"3", "product":"Eraser", "color":"Pink"}
];
// 步骤 1：按 box 字段分组 → 得到 { "1": [...], "2": [...], "3": [...] }
const grouped = Object.groupBy(a, item => item.box);
// 步骤 2：转换为目标结构：提取 key 作为 number，映射 contents 并剔除 box 字段
const result = {
box: Object.entries(grouped).map(([number, items]) => ({
number,
contents: items.map(({ box, ...rest }) => rest) // 解构移除 box，保留其余属性
}))
};
console.log(result);
// 输出符合预期的嵌套结构⚠️ 注意事项：
- 若需兼容旧版浏览器（如 IE 或早期 Chrome），可使用
reduce手动实现分组逻辑，但需额外处理box字段剥离； -
Object.groupBy的回调函数必须返回可字符串化的分组键（如字符串、数字），不支持对象或函数； -
items.map(({ box, ...rest }) => rest)利用解构赋值安全剔除box，避免污染contents中的数据结构。
该方案简洁、可读性强，且完全契合现代 JavaScript 最佳实践——优先使用标准化 API，减少手动迭代与状态管理，提升代码健壮性与可维护性。
