## js生成树结构

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 = {};  // 
    // 先转成map存储
    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": "新生添加"
  }
]