一维数组和树形结构相互转换

昨晚做了一道笔试题,将一维数组转化为树结构,感觉没写好,今天重新整理一下

数据结构如下:

let dataArr = [
        {
            "node_id": 1,
            "parent_id": 0,
            "name": '一级1.0.1'
        },
        {
            "node_id": 2,
            "parent_id": 0,
            "name": '一级1.0.2'
        },
        {
            "node_id": 3,
            "parent_id": 1,
            "name": '二级2.1.3'
        },
        {
            "node_id": 7,
            "parent_id": 1,
            "name": '二级2.1.7'
        },
        {
            "node_id": 6,
            "parent_id": 7,
            "name": '三级3.7.6'
        },
        {
            "node_id": 5,
            "parent_id": 7,
            "name": '三级3.7.5'
        },
    ]

一 、一维数组转化为树结构 

方法一:

1. 按照node_id先排序,方便获取父节点对象

let dataObjById = {};
    dataArr.map((item,index)=>{
        dataObjById[item['node_id']] = item
})

2. 封装递归函数

function getTreeData2(data ,parent) {
        var tree = [];
        var temp;
        data.map((item,index)=>{
            if(item.parent_id == parent){
                temp = getTreeData2(data,item.node_id);
                if(temp.length>0){
                    item.children = temp;
                    let obj = {};
                }else{
                    item.children = [];
                }
                if(dataObjById[item.parent_id]){
                    let { node_id, name, parent_id} = dataObjById[item.parent_id]
                    item.parent = { node_id, name, parent_id};
                }else{
                    item.parent = {};
                }
                tree.push(item);
            }
        })
        return tree;
    }

方法二:

1. 按照node_id的顺序重新排列

2. 遍历数组,通过parent_id,获取父节点对象,如果不存在,则为根节点

3. 插入子节点数组children,

4. 插入父节点对象parent,

5. 为最后一级数据单独处理,插入parent和children=[];

ps:为了保存数据结构的一致性,所有层级若不包含children和parent,需返回 空数组 [ ] 和 空对象 { }

function getTreeData(dataArr) {
        if (dataArr instanceof Array) {
            if (dataArr.length == 0) {
                alert('数组长度为0')
                return
            }
        } else {
            alert('请传入数组')
            return
        }
        let result = [];
        
        // 遍历dataArr
        dataArr.map((item,index)=>{
            // 根据每一个对象的parent_id,获取父节点对象
            var parentNode = dataObjById[item['parent_id']];

            // 如果父节点对象不存在,就是根节点
            if (parentNode) {
                // 父节点对象存在,则插入子节点对象
                if (!parentNode['children']) {
                    parentNode['children'] = [];
                }
                parentNode['children'].push(item);

                // 最后一级数据处理
                let childrenArr = parentNode['children'];
                childrenArr.map((item2,index2)=>{
                    if (!item2.children) {
                        item2.children = [];
                        let { node_id, name, parent_id} = parentNode
                        item2.parent = { node_id, name, parent_id}
                    }
                })

                // 插入parentNode的父节点对象
                if (dataObjById[parentNode['parent_id']]) {
                    let { node_id, name, parent_id} = dataObjById[parentNode['parent_id']]
                    parentNode.parent = { node_id, name, parent_id}
                } else {
                    parentNode.parent = {}
                }
            } else {
                result.push(item);
            }
        })

        // 仅一个一级节点,加children = [],parent = {}
        result.map((item3,index3)=>{
            if (!item3.children) {
                item3.children = [];
                item3.parent = {}
            }
        })
        return result;
    }

转化结果如下:

一维数组和树形结构相互转换_第1张图片

 

二、树结构转化为一维数组 

let list = [];
    function getList(treeData){
        treeData.map((item,index)=>{
            let { node_id, name, parent_id} = item
            list.push({ node_id, name, parent_id})
            if(item.children.length>0){
                getList(item.children)
            }
        })
    }

 

你可能感兴趣的:(JavaScript)