昨天领导给我布置了一个任务,将扁平化数组转换成格式正确的树形数组,这我之前也没搞过啊,就开始胡乱瞎搞一通,经过不懈的努力还是搞出来了。不过今天看到网上有这种算法题,仔细研究了一下,确实牛,我写的是什么牛马。。
原数组的格式是这样的。
var data = [
{ ID: 111 ,code:'1164000',NAME_CHS: '宁夏回族自治区',PATHCODE_ISDETAIL:'0',PATHCODE_PATH:'0001',PATH_LAYER:1},
{ ID: 112 ,code:'1164001',NAME_CHS: '宁夏农垦集团',PATHCODE_ISDETAIL:'0',PATHCODE_PATH:'00010001',PATH_LAYER:2},
{ ID: 113 ,code:'1164002',NAME_CHS: '宁夏建设投资',PATHCODE_ISDETAIL:'0',PATHCODE_PATH:'00010002',PATH_LAYER:2},
{ ID: 1133 ,code:'1164002',NAME_CHS: '宁夏建设投资3级1号',PATHCODE_ISDETAIL:'0',PATHCODE_PATH:'000100020001',PATH_LAYER:3},
{ ID: 1133 ,code:'1164002',NAME_CHS: '宁夏建设投资3级2号',PATHCODE_ISDETAIL:'0',PATHCODE_PATH:'000100020002',PATH_LAYER:3},
{ ID: 114 ,code:'1164003',NAME_CHS: '石家庄',PATHCODE_ISDETAIL:'0',PATHCODE_PATH:'0002',PATH_LAYER:1},
{ ID: 115 ,code:'1164004',NAME_CHS: '石家庄最帅集团',PATHCODE_ISDETAIL:'0',PATHCODE_PATH:'00020001',PATH_LAYER:2},
{ ID: 116 ,code:'1164003',NAME_CHS: '天津',PATHCODE_ISDETAIL:'0',PATHCODE_PATH:'0003',PATH_LAYER:1},
{ ID: 117 ,code:'1164004',NAME_CHS: '天津落户真难',PATHCODE_ISDETAIL:'0',PATHCODE_PATH:'00030001',PATH_LAYER:2},
{ ID: 118 ,code:'1164003',NAME_CHS: '北京',PATHCODE_ISDETAIL:'0',PATHCODE_PATH:'0004',PATH_LAYER:1},
{ ID: 119 ,code:'1164004',NAME_CHS: '北京房价珍贵',PATHCODE_ISDETAIL:'0',PATHCODE_PATH:'00040001',PATH_LAYER:2},
{ ID: 120 ,code:'1164003',NAME_CHS: '内蒙古',PATHCODE_ISDETAIL:'0',PATHCODE_PATH:'0005',PATH_LAYER:1},
{ ID: 121 ,code:'1164004',NAME_CHS: '内蒙古大草原可真不错',PATHCODE_ISDETAIL:'0',PATHCODE_PATH:'00050001',PATH_LAYER:2},
{ ID: 122 ,code:'1164003',NAME_CHS: '长沙',PATHCODE_ISDETAIL:'0',PATHCODE_PATH:'0006',PATH_LAYER:1},
{ ID: 123 ,code:'1164004',NAME_CHS: '长沙的夜生活确实不错',PATHCODE_ISDETAIL:'0',PATHCODE_PATH:'00060001',PATH_LAYER:2},
{ ID: 124 ,code:'1164003',NAME_CHS: '苏州',PATHCODE_ISDETAIL:'0',PATHCODE_PATH:'0007',PATH_LAYER:1},
{ ID: 125 ,code:'1164004',NAME_CHS: '原来苏州的房子也买不起',PATHCODE_ISDETAIL:'0',PATHCODE_PATH:'00070001',PATH_LAYER:2},
{ ID: 124 ,code:'1164003',NAME_CHS: '杭州',PATHCODE_ISDETAIL:'0',PATHCODE_PATH:'0008',PATH_LAYER:1},
{ ID: 125 ,code:'1164004',NAME_CHS: '杭州东额放字',PATHCODE_ISDETAIL:'0',PATHCODE_PATH:'00080001',PATH_LAYER:2},
];
要转换成如下格式的代码。
var data1 = [
{
title: '江西',id: 1,children: [{title: '南昌',id: 1000,
children: [{title: '青山湖区',id: 10001}, {title: '高新区',id: 10002}]
},
{
title: '九江',id: 1001,children:[]
},
{
title: '赣州',id: 1002
}]
}]
就是说首先要把里面的ID变成id,NAME_CHS变成title,那么这里用个map方法就可以了。
var dt = data.map(v => {return {id:v.ID,title:v.NAME_CHS,PATHCODE_PATH:v.PATHCODE_PATH,code:v.code,PATHCODE_ISDETAIL:v.PATHCODE_ISDETAIL,PATH_LAYER:v.PATH_LAYER}})
接下来就开始将这个扁平数组转换成树形数组。
先来看完整代码。
function Arraytree(data){
let result = [];//结果数组
let map = {}; //桥梁对象
for (const d of data) {
map[d.PATHCODE_PATH] = {...d,children:[]} //map是id为key,带children数组的对象为value的对象。
if (d.PATH_LAYER === 1) {
let newItem = map[d.PATHCODE_PATH] //如果级数为1,直接将对应的map中的对象添加到result
result.push(newItem)
} else if(d.PATH_LAYER === 2) {
map[d.PATHCODE_PATH.slice(0,4)].children.push(map[d.PATHCODE_PATH])
} else if(d.PATH_LAYER === 3 ){
map[d.PATHCODE_PATH.slice(0,8)].children.push(map[d.PATHCODE_PATH])
}
}
return result
}
一句一句来分析~
map[d.PATHCODE_PATH] = {...d,children:[]} 这一行给map对象添加了key为PATH,value为原对象+children后的新对象。
那么就可以进行下一步了,如果我们遍历的那一项(比方说就宁夏回族自治区这一项)它的级数为1,那么我就把map里以这一项的PATHCODE_PATH为key的对象push到我的结果数组result中。可以说是非常牛逼了,用map对象来实现了一个连接级数和path的桥梁。
if (d.PATH_LAYER === 1) {
let newItem = map[d.PATHCODE_PATH]
result.push(newItem)
}
但是现在只有1级,2级3级都没进来的,那么我们就继续判断,当遍历项的级数为2时,我们将map中以这项path为key的对象添加到他的父级中,那么怎么找父级呢,因为这个里面子集是在父级的基础上加了4位,所以前4位一样,所以我直接添加到map中以这项的path的前四位为key的数据中。直接完美实现。
else if(d.PATH_LAYER === 2) {
map[d.PATHCODE_PATH.slice(0,4)].children.push(map[d.PATHCODE_PATH])
}
那么同理第三集就是前8位。
else if(d.PATH_LAYER === 3 ){
map[d.PATHCODE_PATH.slice(0,8)].children.push(map[d.PATHCODE_PATH])
}
这样我们就可以得到一个符合要求的树形数组了。但是这样的话如果有4级,5级还是需要手动添加和手动更改,这里我们做一个循环,从第二集开始,这样只需要改最大值就行了。
for(let i=2;i<=3;i++){
if(d.PATH_LAYER === i) {
map[d.PATHCODE_PATH.slice(0,(i-1)*4)].children.push(map[d.PATHCODE_PATH])
} }