一、为什么需要"列表转树"？

后端给的数据长这样

老师举了一个非常真实的例子：

const flatList =

这是一堆扁平数据——所有项都在同一个数组里没有嵌套关系。每一项有一个 parentId,表示它的父节点是谁。

• parentId: null表示"我是根节点，没有父节点"
• parentId: 表示"我的爸爸是id为 的节点"

前端想要的数据长这样

但前端组件需要的是树状结构:

}
]
}
]
}。{
至于"id"，"name":
"parentId":
"children":
}]
}]
]
]
]

从扁平到树状，这就是"列表转树"要解决的问题。

老师提到，这种需求在管理后台特别常见：

• 多级菜单
• 地址三连弹
• 组织架构树
• 商品分类

MySQL存储的是扁平结构。select * from取出来就是一维数组。

二 、方法 一： Map法 ——空间换时间

主要思路

代码实现

 function listToTree { const map = new Map;// HashMap,id -> 节点 const tree =;// 第一轮：把所有节点放入Map并初始化children list.forEach =>{ map.set;
})，// 第二轮：把每个节点挂到父节点下 list.forEach =>{ const current = map.get;//当前项 const parent = map.get;//当前项的父节点 if{ parent.children.push;//有父节点挂上去 }else{ tree.push;//没有父节点就是根节点 } });return tree，} 

执行过程拆解

 Map{ →{id:,name:'一级菜单A',parentld:,children:} →{id:,name:'一级菜单B',parentld:,children:} →{id:,name:'二级A-',parentld:,children:} →{id:。name:'三极A--',parenld:,childrern:} →{id:,name:'二极B-',parenld:,childrern:}} 

代码风格命令式函数式

四、关键知识点：parenltd是树的“DNA”