工作中偶尔就会遇到后端同学丢来一个列表,要我们自己组装成一个树结构渲染到页面上,本文以两种不同方式探索生成树的算法思想。
**
背景介绍
**
可组装成树结构的数组一般有以下几个要素:
- id 当前节点id
- parentId 当前节点的父节点id
- children 子节点列表(可能不会在接口中返回,需要组装时候自己加上)
原始结构:
目标结构:
关键就是一维数组中通过parentId找到其对应的父节点并添加到父节点的children数组中。
实现方案
最直接的方式就是遍历数组,并把找到的子节点逐一添加到父节点中
function listToTreeSimple(data) {
const res = [];
data.forEach((item) => {
const parent = data.find((node) => node.id === item.parentId);
if (parent) {
parent.childr