ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2020-11-20 14:32:46  阅读:216  来源: 互联网

标签:remark false name pid id 树形 一维 数据 children


数组转树形结构

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.   }

标签:remark,false,name,pid,id,树形,一维,数据,children
来源: https://www.cnblogs.com/zhangrenjie/p/14010703.html

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

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有