本文介绍如何使用 JavaScript 的 reduceRight 方法，将一维对象数组高效转换为深度嵌套的树形结构，使每个元素成为前一个元素的唯一子节点。
本文介绍如何使用 javascript 的 `reduceright` 方法，将一维对象数组高效转换为深度嵌套的树形结构，使每个元素成为前一个元素的唯一子节点。
在实际开发中，常需将线性数据（如有序菜单项、步骤列表或层级路径）转化为具有父子关系的嵌套结构。给定数组：
const array = [
{ number: 1, name: 'one', child: [] },
{ number: 2, name: 'two', child: [] },
{ number: 3, name: 'three', child: [] }
];
目标是生成如下嵌套格式（后项作为前项的 child 中唯一元素）：
const nested = [
{
number: 1,
name: 'one',
child: [
{
number: 2,
name: 'two',
child: [
{
number: 3,
name: 'three',
child: []
}
]
}
]
}
];
✅ 推荐解法：reduceRight 构建逆向嵌套
由于嵌套方向为「1 → 2 → 3」，逻辑上需从末尾开始逐层包裹，reduceRight 是最简洁自然的选择：
const nested = array.reduceRight((acc, current) => ({
...current,
child: acc ? [acc] : []
}));
⚠️ 注意：reduceRight 初始值为 undefined，因此需判断 acc 是否存在，避免将 undefined 推入 child 数组。
执行过程详解：
- 第一步（处理 {number:3,...}）：acc 为 undefined → 返回 {..., child: []}
- 第二步（处理 {number:2,...}）：acc 为上一步结果 → 返回 {..., child: [{...}]}
- 第三步（处理 {number:1,...}）：acc 为第二步结果 → 最终形成完整嵌套
最终结果为单个根对象（非数组），若严格要求输出为数组（如示例中的 [ {...} ]），可外层包裹：
const nested = [array.reduceRight((acc, current) => ({
...current,
child: acc ? [acc] : []
}))];
? 补充说明与注意事项
- 不可用 reduce 替代：reduce 从左到右累积，会导致错误嵌套（如 3 成为 2 的子节点，但 2 又被错误地嵌入 1 的 child 中，而 3 未被包含）。
- child 字段必须为数组：即使仅含一个子项，也应保持 child: [...] 结构，确保类型一致性，便于后续递归渲染或遍历。
- 扩展性考虑：若需支持多叉嵌套（如按 parentId 分组），应改用 Map + 循环构建；本方案专用于「链式单路径」场景。
掌握此模式，可快速实现步骤引导、面包屑路径、单链流程图等典型 UI 数据建模需求。
