zoukankan      html  css  js  c++  java
  • 树形数据结构和扁平数据机构的相互转换

    一、扁平数组转树形

     1 var data=[
     2 {pid:0,id:'a',value:'陕西'},
     3     {pid:'a',id:01,value:'西安'},
     4         {pid:01,id:301,value:'雁塔区'},
     5         {pid:01,id:302,value:'高新区'},
     6     {pid:'a',id:02,value:'渭南'},
     7     {pid:'a',id:03,value:'咸阳'},
     8 {pid:0,id:'b',value:'广东'},
     9     {pid:'b',id:11,value:'广州'},
    10     {pid:'b',id:12,value:'深圳'},
    11     {pid:'b',id:13,value:'潮汕'},
    12 {pid:0,id:'c',value:'湖南'},
    13     {pid:'c',id:21,value:'长沙'},
    14     {pid:'c',id:22,value:'常德'},
    15     {pid:'c',id:23,value:'岳阳'},
    16 ];
    17 function toTree(data){
    18   let cloneData = JSON.parse(JSON.stringify(data))    // 对源数据深度克隆
    19   let tree = cloneData.filter((father)=>{              //循环所有项
    20         let branchArr = cloneData.filter((child)=>{
    21             return father.id == child.pid;//返回每一项的子级数组
    22         });
    23         if(branchArr.length>0){
    24             father.children = branchArr; //如果存在子级,则给父级添加一个children属性,并赋值
    25         }
    26         return father.pid==0;//返回第一层
    27     });
    28     return tree;    //返回树形数据
    29 }
    30 var tree=toTree(data);
    31 console.log(tree);

    //下面是递归实现的方法:
     1 function toTree(data) {
     2     // 删除 所有 children,以防止多次调用
     3     data.forEach(function (item) {
     4         delete item.children;
     5     });
     6     // 将数据存储为 以 id 为 KEY 的 map 索引数据列
     7     var map = {};
     8     data.forEach(function (item) {
     9         map[item.id] = item;
    10     });
    11     var val = [];
    12     data.forEach(function (item) {
    13         // 以当前遍历项,的pid,去map对象中找到索引的id
    14         var parent = map[item.pid];
    15             // 好绕啊,如果找到索引,那么说明此项不在顶级当中,那么需要把此项添加到,他对应的父级中
    16             if (parent) {
    17                 (parent.children || ( parent.children = [] )).push(item);
    18             } else {
    19                 //如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中,作为顶级
    20                 val.push(item);
    21             }
    22         });
    23         return val;
    24 }
    25     console.log(toTree(data))

    二、树形数组转扁平

     1 var data=[
     2     {id: "a",pid: 0,value: "陕西",children:[
     3         {id: 01,pid: "a",value: "西安"},
     4         {id: 02,pid: "a",value: "渭南"},
     5         {id: 03,pid: "a",value: "咸阳"},
     6     ]},
     7     {id: "b",pid: 0,value: "广东",children:[
     8         {id: 11,pid: "b",value: "广州"},
     9         {id: 12,pid: "b",value: "深圳"},
    10         {id: 13,pid: "b",value: "潮汕"},
    11     ]},
    12     {id: "c",pid: 0,value: "湖南",children:[
    13         {id: 21,pid: "c",value: "长沙"},
    14         {id: 22,pid: "c",value: "常德"},
    15         {id: 23,pid: "c",value: "岳阳"},
    16     ]},    
    17 ];
    18 function toLine(data){
    19     return data.reduce((arr, {id, value, pid, children = []}) =>
    20         arr.concat([{id, value, pid}], toLine(children)), [])
    21         return result;
    22 }
    23 var listarr=toLine(data);
    24 console.log(listarr);
  • 相关阅读:
    UESTC--1267
    HDU--1394
    rvm 安装后的补充工作:source $HOME/.profile
    FFmpeg 初级使用
    Vue 打包部署上线
    阿里云Centos7.6中部署nginx1.16+uwsgi2.0.18+Django2.0.4
    响应式网站设计---Bootstrap
    GitBook简单的使用
    VUE 参数共享问题
    Django之JWT理解及简单应用
  • 原文地址:https://www.cnblogs.com/fxwoniu/p/13929236.html
Copyright © 2011-2022 走看看