本文介绍使用 JavaScript 的 Object.groupBy() 和 Object.entries() 高效实现对象数组按公共字段（如 box）分组，并转换为包含 number 和 contents 的标准化嵌套结构。
本文介绍使用 javascript 的 `object.groupby()` 和 `object.entries()` 高效实现对象数组按公共字段（如 box）分组，并转换为包含 `number` 和 `contents` 的标准化嵌套结构。
在实际开发中，常需将扁平的对象数组按某一属性（如 "box"）聚类，再组织为层次化结构——例如将多个商品归入对应箱号下，并剔除重复的分组键，仅保留有意义的字段（如 product 和 color）。原数组中每个对象都含 "box" 字段，目标是将其转化为一个单键对象 { box: [...] }，其中每个子项含 "number"（即原 box 值）和 "contents"（该箱内所有精简后的商品对象）。
推荐方案是使用现代 JavaScript 提供的 Object.groupBy()（ES2024 标准，Chrome 117+、Edge 117+、Node.js 20.6+ 支持），它专为按条件分组设计，语义清晰且性能优良：
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：转为 entries 并映射为标准结构
const result = {
box: Object.entries(grouped)
.map(([number, items]) => ({
number,
contents: items.map(({ product, color }) => ({ product, color }))
}))
};
console.log(result);
// 输出符合预期的嵌套结构⚠️ 注意事项：
- 若需兼容旧版浏览器或 Node.js 版本较低环境，可回退至
reduce手动实现（见下方替代方案）； -
Object.groupBy()会保留原始对象全部字段，因此后续需用.map()显式提取product和color，避免冗余数据； - 原问题中拼写错误
"Yello"已在示例中修正为"Yellow"，实际使用时请确保源数据准确性。
兼容性替代方案（无 Object.groupBy 时）：
const grouped = a.reduce((acc, item) => {
const key = item.box;
if (!acc[key]) acc[key] = [];
acc[key].push({ product: item.product, color: item.color });
return acc;
}, {});
const result = {
box: Object.entries(grouped).map(([number, contents]) => ({ number, contents }))
};最终生成的结构完全匹配需求：顶层为 { box: [...] }，每项含 number 字符串与 contents 对象数组，语义明确、易于遍历与渲染。
