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

数组转树形结构

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.  
    }
原文地址:https://www.cnblogs.com/zhangrenjie/p/14010703.html