树形结构的数据与一维数组数据的相互转换

数组转树形结构

var data = [
              {"id":2,"name":"第一级1","pid":0},
              {"id":3,"name":"第二级1","pid":2},
              {"id":5,"name":"第三级1","pid":4},
              {"id":100,"name":"第三级2","pid":3},
              {"id":6,"name":"第三级2","pid":3},
              {"id":601,"name":"第三级2","pid":6},
              {"id":602,"name":"第三级2","pid":6},
              {"id":603,"name":"第三级2","pid":6}
            ];
// 数组转树形结构数据(原理即为通过设置id为key值,再通过pid去找这个key是否一样,一样则为这数据的子级数据)
            function arrayToJson(treeArray){
                var r = [];
                var tmpMap ={};
                for (var i=0, l=treeArray.length; i<l; i++) {
                 // 以每条数据的id作为obj的key值,数据作为value值存入到一个临时对象里面
                  tmpMap[treeArray[i]["id"]]= treeArray[i]; 
                } 
                console.log('tmpMap',tmpMap)
                for (i=0, l=treeArray.length; i<l; i++) {
                  var key=tmpMap[treeArray[i]["pid"]];
                  console.log('key',key)
                  //循环每一条数据的pid,假如这个临时对象有这个key值,就代表这个key对应的数据有children,需要Push进去
                  //如果这一项数据属于哪个数据的子级
                  if (key) {
                      // 如果这个数据没有children
                    if (!key["children"]){
                        key["children"] = [];
                        key["children"].push(treeArray[i]);
                    // 如果这个数据有children
                    }else{
                      key["children"].push(treeArray[i]);
                    }       
                  } else {
                    //如果没有这个Key值,就代表找不到属于哪个数据,那就代表没有父级,直接放在最外层
                    r.push(treeArray[i]);
                  }
                }
                return r
               }

 

树形结构数据转单层数组形式数据

var jsonarr = [{
                id: 1,
                name: '北京市',
                ProSort: 1,
                remark: '直辖市',
                pid: '',
                isEdit: false,
                children: [{
                  id: 35,
                  name: '朝阳区',
                  pid: 1,
                  remark: '',
                  isEdit: false,
                  children: []
                }, {
                  id: 36,
                  name: '海淀区',
                  pid: 1,
                  remark: '',
                  isEdit: false,
                  children: []
                }, {
                  id: 37,
                  name: '房山区',
                  pid: 1,
                  remark: '',
                  isEdit: false,
                  children: []
                }, {
                  id: 38,
                  name: '丰台区',
                  pid: 1,
                  remark: '',
                  isEdit: false,
                  children: []
                }]
              }, {
                id: 2,
                name: '天津市',
                ProSort: 2,
                remark: '直辖市',
                pid: '',
                isEdit: false,
                children: [{
                  id: 41,
                  name: '北辰区',
                  pid: 2,
                  remark: '',
                  isEdit: false,
                  children: [{
                  id: 113,
                  name: '天津大道',
                  ProSort: 2,
                  remark: '道路',
                  pid: '',
                  isEdit: false,
                  children:[]}]
                }, {
                  id: 42,
                  name: '河北区',
                  pid: 2,
                  remark: '',
                  isEdit: false,
                  children: []
                }, {
                  id: 43,
                  name: '西青区',
                  pid: 2,
                  remark: '',
                  isEdit: false,
                  children: []
                }]
              }, {
                id: 3,
                name: '河北省',
                ProSort: 5,
                remark: '省份',
                pid: '',
                isEdit: false,
                children: [{
                  id: 45,
                  name: '衡水市',
                  pid: 3,
                  remark: '',
                  isEdit: false,
                  children: []
                }, {
                  id: 46,
                  name: '张家口市',
                  pid: 3,
                  remark: '',
                  isEdit: false,
                  children: []
                }]
              }]
// 树形结构数据转单层数组形式
            function jsonToArray(nodes) {
              var r=[];
              if (Array.isArray(nodes)) {
                for (var i=0, l=nodes.length; i<l; i++) {
                  r.push(nodes[i]); // 取每项数据放入一个新数组
                  if (Array.isArray(nodes[i]["children"])&&nodes[i]["children"].length>0)
                   // 若存在children则递归调用,把数据拼接到新数组中,并且删除该children
                    r = r.concat(jsonToArray(nodes[i]["children"]));
                      delete nodes[i]["children"]
                }
              } 
              return r;
            }

 

深拷贝

function deepCopy(obj){
                var object;
                // 深度复制数组
                if(Object.prototype.toString.call(obj)=="[object Array]"){    
                  object=[];
                  for(var i=0;i<obj.length;i++){
                    object.push(deepCopy(obj[i]))
                  }   
                  return object
                }
              // 深度复制对象
                if(Object.prototype.toString.call(obj)=="[object Object]"){   
                  object={};
                  for(var p in obj){
                    object[p]=obj[p]
                  }   
                  return object
                }
              }

 

  1. var jsonarr = [{
  2.   id: 1,
  3.   name: '北京市',
  4.   ProSort: 1,
  5.   remark: '直辖市',
  6.   pid: '',
  7.   isEdit: false,
  8.   children: [{
  9.   id: 35,
  10.   name: '朝阳区',
  11.   pid: 1,
  12.   remark: '',
  13.   isEdit: false,
  14.   children: []
  15.   }, {
  16.   id: 36,
  17.   name: '海淀区',
  18.   pid: 1,
  19.   remark: '',
  20.   isEdit: false,
  21.   children: []
  22.   }, {
  23.   id: 37,
  24.   name: '房山区',
  25.   pid: 1,
  26.   remark: '',
  27.   isEdit: false,
  28.   children: []
  29.   }, {
  30.   id: 38,
  31.   name: '丰台区',
  32.   pid: 1,
  33.   remark: '',
  34.   isEdit: false,
  35.   children: []
  36.   }]
  37.   }, {
  38.   id: 2,
  39.   name: '天津市',
  40.   ProSort: 2,
  41.   remark: '直辖市',
  42.   pid: '',
  43.   isEdit: false,
  44.   children: [{
  45.   id: 41,
  46.   name: '北辰区',
  47.   pid: 2,
  48.   remark: '',
  49.   isEdit: false,
  50.   children: [{
  51.   id: 113,
  52.   name: '天津大道',
  53.   ProSort: 2,
  54.   remark: '道路',
  55.   pid: '',
  56.   isEdit: false,
  57.   children:[]}]
  58.   }, {
  59.   id: 42,
  60.   name: '河北区',
  61.   pid: 2,
  62.   remark: '',
  63.   isEdit: false,
  64.   children: []
  65.   }, {
  66.   id: 43,
  67.   name: '西青区',
  68.   pid: 2,
  69.   remark: '',
  70.   isEdit: false,
  71.   children: []
  72.   }]
  73.   }, {
  74.   id: 3,
  75.   name: '河北省',
  76.   ProSort: 5,
  77.   remark: '省份',
  78.   pid: '',
  79.   isEdit: false,
  80.   children: [{
  81.   id: 45,
  82.   name: '衡水市',
  83.   pid: 3,
  84.   remark: '',
  85.   isEdit: false,
  86.   children: []
  87.   }, {
  88.   id: 46,
  89.   name: '张家口市',
  90.   pid: 3,
  91.   remark: '',
  92.   isEdit: false,
  93.   children: []
  94.   }]
  95.   }]
  96.   // 树形结构数据转单层数组形式
  97.   function jsonToArray(nodes) {
  98.   var r=[];
  99.   if (Array.isArray(nodes)) {
  100.   for (var i=0, l=nodes.length; i<l; i++) {
  101.   r.push(nodes[i]); // 取每项数据放入一个新数组
  102.   if (Array.isArray(nodes[i]["children"])&&nodes[i]["children"].length>0)
  103.   // 若存在children则递归调用,把数据拼接到新数组中,并且删除该children
  104.   r = r.concat(jsonToArray(nodes[i]["children"]));
  105.   delete nodes[i]["children"]
  106.   }
  107.   }
  108.   return r;
  109.   }
上一篇:ElasticSearch搜索技术与集群架构原理(算是白话)有问题欢迎评论


下一篇:vuue 打卡