javascript 中树形结构与数组结构的转换

333 阅读1分钟

请分别实现函数 arrToTree 以及 treeToArr 实现两种结构之间的转换

const arr = [
    { id: 1, pid: null, name: "研发部" },
    { id: 8, pid: 4, name: "Java后端研发部" },
    { id: 2, pid: null, name: "管理部" },
    { id: 3, pid: 1, name: "前端研发部" },
    { id: 4, pid: 1, name: "后端研发部" },
    { id: 5, pid: 2, name: "行政管理部" },
    { id: 6, pid: 2, name: "人力资源管理部" },
    { id: 7, pid: null, name: "财务部" },
]

const tree = [
    {
        id: 1, name: '研发部', children: [
            { id: 3, name: '前端研发部' },
            {
                id: 4, name: '后端研发部', children: [
                    { id: 8, name: 'Java后端研发部' }
                ]
            }
        ]
    },
    {
        id: 2, name: '管理部', children: [
            { id: 5, name: '行政管理部' },
            { id: 6, name: '人力资源管理部' },
        ]
    },
    { id: 7, name: '财务部' },

]

首先实现 arrToTree

const arrToTree = (arr, pid = null) => {
    return arr.reduce((accu, item) => {
        if (item.pid === pid) {
            const children = arrToTree(arr, item.id);
            if (children.length) {
                item.children = children;
            }
            /*
            上面的if 判断可以换一种写法
            children && (item.children = children)
            */
            delete item.pid;
            accu.push({ ...item });
        }
        return accu
    }, [])
}

再来实现 treeToArr

const tree2Arr = (tree, pid = null) => {
    return tree.reduce((accu, item) => {
        // if(item.children) {
        //     const tempArr = tree2Arr(item.children, item.id);
        //     accu.push(...tempArr);
        // }
        item.children && (accu.push(...tree2Arr(item.children, item.id)));
        accu.push({
            id: item.id,
            pid: pid,
            name: item.name
        })
        return accu
    }, [])
}


// 还有另一种使用 reduce的写法
const treeToArray = (tree, res = [], pid = null) => {
    for (let item of tree) {
        // if (item.children) {
        //     treeToArray(item.children, res, item.id)
        // }
        item.children && treeToArray(item.children, res, item.id)
        res.push({
            id: item.id,
            pid: pid,
            name: item.name
        })

    }
    return res
}