js生成树结构
01. 逻辑
01.1. 递归实现
function arr2Tree(data, pid = 0) {
const child = [];
const sun = [];
data.forEach(item => {
if(item.pid === pid) {
child.push(item)
}else {
sun.push(item)
}
})
child.forEach(item => {
const _c = arr2Tree(sun, item.id)
if(_c.length) {
item.child = _c
}
})
return child;
}
01.2. hashMap实现
function arrayToTree(items) {
const result = [];
const itemMap = {};
for (const item of items) {
itemMap[item.id] = { ...item, children: [] }
}
for (const item of items) {
const id = item.id;
const pid = item.pid;
const treeItem = itemMap[id];
if (pid === 0) {
result.push(treeItem);
} else {
if (!itemMap[pid]) {
itemMap[pid] = {
children: [],
}
}
itemMap[pid].children.push(treeItem)
}
}
return result;
}
02. 测试数据
[
{
"id": 2,
"pid": 0,
"path": "/course",
"name": "Course",
"title": "课程管理"
},
{
"id": 3,
"pid": 2,
"path": "operate",
"name": "CourseOperate",
"title": "实操课程",
"link": "/course/operate"
},
{
"id": 4,
"pid": 3,
"path": "info_data",
"name": "CourseOperateInfoData",
"title": "数据课程",
"link": "/course/operate/info_data"
},
{
"id": 5,
"pid": 2,
"path": "add",
"name": "CourseAdd",
"title": "增加课程",
"link": "/course/add"
},
{
"id": 6,
"pid": 0,
"path": "/student",
"name": "Student",
"title": "学生管理"
},
{
"id": 7,
"pid": 6,
"path": "operate",
"name": "StudentOperate",
"link": "/student/operate",
"title": "学生操作"
},
{
"id": 8,
"pid": 6,
"path": "add",
"name": "StudentAdd",
"link": "/student/add",
"title": "新生添加"
}
]