1

javascript生成一棵树

 2 years ago
source link: https://www.fly63.com/article/detial/11417
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

更新日期: 2022-04-29阅读量: 46标签: 分享

扫一扫分享

输入一串父子节点对的数组,利用其构造一颗树

const arr = [
    {id:1,parentid:null},
    {id:2,parentid:1},
    {id:3,parentid:1},
    {id:4,parentid:2},
    {id:5,parentid:3}
]
  1. 明确输出的形式:

    type1: {id:0,chid:[{id,child},{id,child},{id,child}]}

    type2: 0:{1:{5:{}},2:{},3:{},4:{}}

    实践中type1更为实用,故选择之

  2. 每次只能处理一对父子关系,树形结构的核心是节点,也即处理两个节点。

    由于每个节点的状态是需要维护的,因此需要用一种结构存储每个节点并更新之,最后程序只需要找到根节点是谁即可输出完整的属性结构;

解决代码

const arr = [
    {id:1,parentid:null},
    {id:2,parentid:1},
    {id:3,parentid:1},
    {id:4,parentid:2},
    {id:5,parentid:3}
]

function generateTree(srcList){
    // 1. 明确输出的形式:
    // type1:{id:0,chid:[{id,child},{id,child},{id,child}]}
    // type2: 0:{1:{5:{}},2:{},3:{},4:{}}
    // 实践中type1更为实用,故选择之
    // 2. 每次只能处理一对父子关系,树形结构的核心是节点,也即处理两个节点。
    // 由于每个节点的状态是需要维护的,因此需要用一种结构存储每个节点并更新之,最后程序只需要找到根节点是谁即可输出完整的属性结构;
    let nodeRigister = {}
    let root = undefined
    srcList.forEach(element => {
        let childId = element.id
        let parentId = element.parentid
        // parentId可能引入新的信息:判断是否为根节点。需要特判之
        if(!parentId){
            root = childId
        } 
        // 处理儿子节点
        if(!(childId in Object.keys(nodeRigister))){
            nodeRigister[childId] = {id:childId,child:[]}
        }
        // 处理父节点
        if(parentId && parentId in Object.keys(nodeRigister)){
            nodeRigister[parentId].child.push(nodeRigister[childId])
        }else if(parentId){
            nodeRigister[parentId] = {id:parentId,child:[nodeRigister[childId]]}
        }
    });
    return nodeRigister[root]
}
generateTree(arr)
来自:https://www.cnblogs.com/KYSpring/archive/2022/04/28/16202895.html

链接: https://www.fly63.com/article/detial/11417


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK