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

数组转树形结构

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