把有层级的一维数组改为树形结构

时间:2019-06-12
本文章向大家介绍把有层级的一维数组改为树形结构,主要包括把有层级的一维数组改为树形结构使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

朋友问的问题,我试着写了一下。用了两层递归,感觉很麻烦。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</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;i<tree.length;i++){
    tree[i].children=[];//先向所有节点添加子节点
}
function makeTree(){
    const treeCopy=JSON.parse(JSON.stringify(tree));//每次递归拷贝一份原始数据,用于循环变量i;
    for(let i=0;i<treeCopy.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;j<nArr.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>Document</title>
</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>

思路已经比较清楚了,可是代码理着理着就乱了,果然还是自己会的东西太少了吧,还是得多看多学。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</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;i<tree.length;i++){
tree[i].children=[];//先向所有节点添加子节点
}
function makeTree(){
const treeCopy=JSON.parse(JSON.stringify(tree));//每次递归拷贝一份原始数据,用于循环变量i;
for(let i=0;i<treeCopy.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;j<nArr.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>

$flag 上一页 下一页