前端扁平数据与树形结构互转

346 阅读1分钟

数组例子

扁平数据

let arr = [
    {id: 1, name: '部门1', pid: 0},
    {id: 2, name: '部门2', pid: 1},
    {id: 3, name: '部门3', pid: 1},
    {id: 4, name: '部门4', pid: 3},
    {id: 5, name: '部门5', pid: 4},
]

树形数据

let arr_tree = [
    {
        id: 1,
        name: '部门1',
        pid: 0,
        children: [
            {
                id: 2,
                name: '部门2',
                pid: 1,
                children: []
            },
            {
                id: 3,
                name: '部门3',
                pid: 1,
                children: [
                    {
                        id: 4,
                        name: '部门4',
                        pid: 3,
                        children: [
                            {
                                id: 5,
                                name: '部门5',
                                pid: 4,
                                children: []
                            }
                        ]
                    }
                ]
            }
        ],
    },
]

扁平数据转为树形结构

思考一下

  • 最顶层的数据,是不是没有pid,或者pid为0
  • 每个children,它的pid与包含他的数据的id一致

真真是暴力

好像是O(n^2)

function get_tree (arr) {
    const root_arr = []
    arr.forEach((item) => {
        // 整个数组遍历,瞅瞅是不是有item底下的children
        const children_arr = arr.filter((item_arr) => {
            return item_arr.pid == item.id
        })
        item.children = children_arr;
        // 找到根数组,最上层,没有parent的数据
        if(!item.pid) {
            root_arr.push(item)
        }
    })
    return root_arr;
}

树形结构转为扁平数据

递归给搞出来吧

function get_bianpin2 (result,arr) {
    arr.map((item) => {
        const {id, name, pid , children = []} = item;
        result.push({id, name, pid})
        if(children.length) {
            get_bianpin2(result, children)
        }
    })
    return result
}