把有层级的一维数组改为树形结构
2020-12-13 01:48
标签：har make class else title log ack parentId head 朋友问的问题，我试着写了一下。用了两层递归，感觉很麻烦。 朋友的朋友也拿去实现了一下，我瞬间感觉自己弱爆了。。。 思路已经比较清楚了，可是代码理着理着就乱了，果然还是自己会的东西太少了吧，还是得多看多学。 把有层级的一维数组改为树形结构 标签：har make class else title log ack parentId head 原文地址：https://www.cnblogs.com/eYan/p/11011608.htmlDOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Documenttitle>
head>
body>
body>
html>
script type="text/javascript">
let tree =[
{
id: 2,
name: "节点二",
parentId: null
},
{
id: 9,
name: "节点1-1",
parentId: 1
},
{
id: 19,
name: "节点1-2",
parentId: 1
},
{
id: 39,
name: "节点三",
parentId: null
},
{
id: 40,
name: "节点1-3",
parentId: 1
},
{
id: 41,
name: "节点1-1-1",
parentId: 9
},
{
id: 1,
name: "节点一",
parentId: null
},
]
let newArr=[];
for(let i=0;itree.length;i++){
tree[i].children=[];//先向所有节点添加子节点
}
function makeTree(){
const treeCopy=JSON.parse(JSON.stringify(tree));//每次递归拷贝一份原始数据，用于循环变量i；
for(let i=0;itreeCopy.length;i++){
if(treeCopy[i].parentId){//判断根节点
const tr=this.compare(treeCopy[i],newArr);
if(tr){
tree=tree.filter(item=>{//将已匹配的子节点剔除数组
return item.id!==tr.id
});
}
}else{
newArr.push(treeCopy[i]);
tree=tree.filter(item=>{//将根节点剔除数组
return item.id!==treeCopy[i].id
});
}
}
if(tree.length){//原始数组剔除完递归结束
this.makeTree();
}
}
function compare(t,nArr){
for(let j =0;jnArr.length;j++){
if(nArr[j].id===t.parentId){//先比较当前节点
nArr[j].children.push(t);
return t;
}
if(nArr[j].children.length){//当前节点匹配不上匹配子节点
return this.compare(t,nArr[j].children);
}
}
return false;
}
this.makeTree();
console.log(newArr);
script>
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Documenttitle>
head>
body>
body>
html>
script type="text/javascript">
let arr =[
{
id: 41,
name: "节点1-1-1",
parentId: 9
},
{
id: 2,
name: "节点二",
parentId: null
},
{
id: 9,
name: "节点1-1",
parentId: 1
},
{
id: 19,
name: "节点1-2",
parentId: 1
},
{
id: 39,
name: "节点三",
parentId: null
},
{
id: 40,
name: "节点1-3",
parentId: 1
},
{
id: 1,
name: "节点一",
parentId: null
},
{
id: 55,
name: "节点1-1-1-1",
parentId: 41
},
]
var data = [...arr];
var tree = data.filter((father) => {
var branchArr = data.filter((child) => {
if (father.id == child.parentId ) child._hasParent = true;
return father.id == child.parentId;
});
if (branchArr.length > 0) father.children = branchArr;
return !father._hasParent;
});
tree = tree.filter((item) => {
return !item._hasParent;
})
script>