练习（五）

2021-10-05 12:02:12 阅读：217 来源： 互联网

数组转成树：

后端接口返回的数据一般是平铺的数组结构，而不会是树形结构，例如下面的平铺数组结构：

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: "运维工程师"}
]

这样的数据可以直接在table中使用，但是不能直接在tree组件中使用，需要我们做一些转换。

需要额外补充一个函数做转换：

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 treeData = arrToTree(data)
// treeData就是：
// [{
//   label: '张大大',
//   children: [
//     {
//       label: '小亮',
//       children: [{label: '小丽'}，{label: '大光'}]
//     },
//     {
//       label: '小美',
//       children: [{label: '小高'}]
//     },
//     {
//       label: '老马',
//       children: [{label: '小刘'}，{label: '小华'},{label: '小李'}]
//     },
//     {
//       label: '老王',
//       children: [{label: '小赵'}，{label: '小强'}]
//     },
//     {
//       label: '老李',
//       children: [{label: '小涛'}]
//     }
//   ]
// }]

以下是我的代码：

      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) {
        // 1.创建项目经理的对象
        let xmjl = {};

        // 把项目经理摘出来
        data.forEach((item) => {
          item.lable = item["name"];
          delete item.name;
          delete item.job;
          if (item.id === "01") {
            // console.log(item)
            delete item.id;
            delete item.pid;
            xmjl = item;
          }
        });
        // 2.给项目经理对象创建一个 Children数组
        xmjl.Children = [];

        // 遍历数组 把 项目经理的小跟班找到
        data.forEach((item) => {
          if (item.pid === "01") {
            // 解构赋值 不然会改变他的原数据
            const newobj = { ...item };
            // 给新对象创建一个Children数组
            newobj.Children = [];
            // 把这些数据全都插入到项目经理的数组里
            xmjl.Children.push(newobj);
            // console.log(newobj)
          }
        });
        // 筛选出 不是经理的人员
        const a = data.filter(function (item) {
          return item.pid !== "" && item.pid !== "01";
        });

        // 遍历筛选出来的人员
        a.forEach((item) => {
          // 和项目经理手下的经理一一比对
          xmjl.Children.forEach((obj) => {
            // 如果是他的人，就插入到哪个经理的children下
            if (item.pid === obj.id) {
              // console.log(item)
              // 把当前的人员插入到各项目经理下
              delete item.id;
              delete item.pid;
              obj.Children.push(item);
              // console.log(obj)
            }
          });
        });
        xmjl.Children.forEach((item) => {
          delete item.id;
          delete item.pid;
        });
        // console.log(xmjl);
        return xmjl;
      }

      const treeData=arrToTree(data);
      console.log(treeData);

标签：01,name,练习,pid,item,job,id
来源： https://blog.csdn.net/JINGinC/article/details/120595397

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

练习 （五）

数组转成树：

以下是我的代码：

练习（五）