树形数据结构和扁平数据机构的相互转换
一、扁平数组转树形
1 var data=[ 2 {pid:0,id:'a',value:'陕西'}, 3 {pid:'a',id:01,value:'西安'}, 4 {pid:01,id:301,value:'雁塔区'}, 5 {pid:01,id:302,value:'高新区'}, 6 {pid:'a',id:02,value:'渭南'}, 7 {pid:'a',id:03,value:'咸阳'}, 8 {pid:0,id:'b',value:'广东'}, 9 {pid:'b',id:11,value:'广州'}, 10 {pid:'b',id:12,value:'深圳'}, 11 {pid:'b',id:13,value:'潮汕'}, 12 {pid:0,id:'c',value:'湖南'}, 13 {pid:'c',id:21,value:'长沙'}, 14 {pid:'c',id:22,value:'常德'}, 15 {pid:'c',id:23,value:'岳阳'}, 16 ]; 17 function toTree(data){ 18 let cloneData = JSON.parse(JSON.stringify(data)) // 对源数据深度克隆 19 let tree = cloneData.filter((father)=>{ //循环所有项 20 let branchArr = cloneData.filter((child)=>{ 21 return father.id == child.pid;//返回每一项的子级数组 22 }); 23 if(branchArr.length>0){ 24 father.children = branchArr; //如果存在子级,则给父级添加一个children属性,并赋值 25 } 26 return father.pid==0;//返回第一层 27 }); 28 return tree; //返回树形数据 29 } 30 var tree=toTree(data); 31 console.log(tree);
//下面是递归实现的方法:
1 function toTree(data) { 2 // 删除 所有 children,以防止多次调用 3 data.forEach(function (item) { 4 delete item.children; 5 }); 6 // 将数据存储为 以 id 为 KEY 的 map 索引数据列 7 var map = {}; 8 data.forEach(function (item) { 9 map[item.id] = item; 10 }); 11 var val = []; 12 data.forEach(function (item) { 13 // 以当前遍历项,的pid,去map对象中找到索引的id 14 var parent = map[item.pid]; 15 // 好绕啊,如果找到索引,那么说明此项不在顶级当中,那么需要把此项添加到,他对应的父级中 16 if (parent) { 17 (parent.children || ( parent.children = [] )).push(item); 18 } else { 19 //如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中,作为顶级 20 val.push(item); 21 } 22 }); 23 return val; 24 } 25 console.log(toTree(data))
二、树形数组转扁平
1 var data=[ 2 {id: "a",pid: 0,value: "陕西",children:[ 3 {id: 01,pid: "a",value: "西安"}, 4 {id: 02,pid: "a",value: "渭南"}, 5 {id: 03,pid: "a",value: "咸阳"}, 6 ]}, 7 {id: "b",pid: 0,value: "广东",children:[ 8 {id: 11,pid: "b",value: "广州"}, 9 {id: 12,pid: "b",value: "深圳"}, 10 {id: 13,pid: "b",value: "潮汕"}, 11 ]}, 12 {id: "c",pid: 0,value: "湖南",children:[ 13 {id: 21,pid: "c",value: "长沙"}, 14 {id: 22,pid: "c",value: "常德"}, 15 {id: 23,pid: "c",value: "岳阳"}, 16 ]}, 17 ]; 18 function toLine(data){ 19 return data.reduce((arr, {id, value, pid, children = []}) => 20 arr.concat([{id, value, pid}], toLine(children)), []) 21 return result; 22 } 23 var listarr=toLine(data); 24 console.log(listarr);