js生成樹結(jié)構(gòu)
- 假樹洒沦，利用共享內(nèi)存實(shí)現(xiàn)，非真遍歷价淌，這個(gè)是一種比較直觀的寫法
let list = [
{id:1,name:100},
{id:11,name:101,pid:1},
{id:111,name:1011,pid:11},
{id:2,name:200},
{id:22,name:202,pid:2},
{id:3,name:3002},
{id:32,name:3003,pid:1},
{id:42,name:4003,pid:111}
]
let mapList = list.reduce((prev,v)=>{
prev[v.id]=v
return prev
},[])
let tree = list.reduce((prev,v)=>{
if(!mapList[v.pid]){
v.children?'':(v.children=[])
prev=[...prev,...[v]]
}else{
mapList[v.pid].children?'':(()=>mapList[v.pid].children=[])()
mapList[v.pid].children=[...mapList[v.pid].children,...[v]]
}
return prev
},[])
console.log(mapList);
console.log(tree);
2.假樹申眼， 同第一種原理，非直觀寫法,是不是簡(jiǎn)便多了
let tree = list.map(v=>{
v.children?'':(()=>v.children=[])()
v.pid?'':(()=> v.type='parent')()
v.children = list.filter(m=>m.pid===v.id)
return v
}).filter(v=>v.type==='parent')
console.log(list);
console.log(tree);
級(jí)聯(lián)數(shù)據(jù)拉平
//級(jí)聯(lián)數(shù)據(jù)拉平
function flatArray(key,deep,arr){
const readNodes = function(key,deep,arr,data=[]){
for (let item of arr) {
data.push(item)
if (item[deep] && item[deep].length){
readNodes(key,deep,item[deep],data)
}
}
return data
}
return readNodes(key,deep,arr)
}
flatArray('id','children',list）
返回父子鏈
function findParent(value,key,parent,deep,arr1=[]){
let readNodes = (value,key,parent,deep,arr,data=[])=>{
for(let v of arr){
if(!value) break
if(v[key]===value){
data.unshift(v)
readNodes(v[parent],key,parent,deep,arr1,data)
break
}else{
v[deep]&&v[deep].length?readNodes(value,key,parent,deep,v[deep],data):''
}
}
return data
}
return readNodes(value,key,parent,deep,arr1)
}
console.log(findParent(111,'id','pid','children',tree));
