将扁平数据转换成树行结构_js 讲数据改造成树行结构的方法-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_61749828/article/details/121055803

本文展示了如何将一个包含ID和父ID的数据数组转换为树形结构，用于组织项目团队成员的层级关系。通过遍历数据并使用filter方法，将每个顶级成员及其下属成员构建成树状结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

const data = [
        { id: "01", name: "张大大", pid: "", job: "项目经理" },
        { id: "02", name: "小亮", pid: "01", job: "产品leader" },
        { id: "03", name: "小美", pid: "01", job: "UIleader" },
        { id: "04", name: "老马", pid: "01", job: "技术leader" },
        { id: "05", name: "老王", pid: "01", job: "测试leader" },
        { id: "06", name: "老李", pid: "01", job: "运维leader" },
        { id: "07", name: "小丽", pid: "02", job: "产品经理" },
        { id: "08", name: "大光", pid: "02", job: "产品经理" },
        { id: "09", name: "小高", pid: "03", job: "UI设计师" },
        { id: "10", name: "小刘", pid: "04", job: "前端工程师" },
        { id: "11", name: "小华", pid: "04", job: "后端工程师" },
        { id: "12", name: "小李", pid: "04", job: "后端工程师" },
        { id: "13", name: "小赵", pid: "05", job: "测试工程师" },
        { id: "14", name: "小强", pid: "05", job: "测试工程师" },
        { id: "15", name: "小涛", pid: "06", job: "运维工程师" }
      ];

定义一个新的是需要遍历的扁平数组

 function arrTotree(data) {
        // 定义需要返回的树形结构数据
        const treeDate = [];

        data.forEach(item => {
           //item.pid === "" 说明是顶级的
          if (item.pid === "") {
            treeDate.push(item);
          }
          // data.filter过滤 括号里面是一个回调函数
          // value是children 的每一项
          // 让children的每一项pid和遍历的每一项id做对比 一样了说明是一个组的
          // 然后赋值给新的children 新的children又是一个数组和顶级的组长对象{} 是同一级
          const children = data.filter(value => value.pid === item.id);
          item.children = children;
        });

        return treeDate;
      }

      const res = arrTotree(data);
      console.log(res);