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

在我们做项目时，我们有时需要树形结构的数据进行数据的树形层级展示，或者需要把返回的数据结构数据进行拆解成单层数组形式。下面我们就来总结下这两种方法。

数组转树形结构：

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) {// 如果这个数据没有childrenif (!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则递归调用，把数据拼接到新数组中，并且删除该childrenr = 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}}

对两个方法的调用与验证：

var copydata = deepCopy(jsonarr)var bb = jsonToArray(copydata)console.log('json转数组',bb)var aa = arrayToJson(data)console.log('数组转树形结构',aa)