Javascript 前端私房菜(一)-- 平表转树型结构

190 阅读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}, 
]

二、目标结构(树形结构):

[ 
    { 
        "id": 1, 
        "name": "部门1", 
        "pid": 0, 
        "children": [ 
            { 
                "id": 2, 
                "name": "部门2", 
                "pid": 1, 
                "children": [] 
            }, 
            { 
                "id": 3, 
                "name": "部门3", 
                "pid": 1,
                "children": [ 
                    // 结果 ,,, 
                    ] 
             } 
         ] 
     } 
]

三、解决方案:

function arrayToTree(items) { 
    const result = []; // 存放结果集 
    const itemMap = {}; // 
    for (const item of items) { 
        const id = item.id; 
        const pid = item.pid; 
        if (!itemMap[id]) { 
            itemMap[id] = { 
                children: [], 
            } 
        } 
        
        itemMap[id] = { 
            ...item, 
            children: itemMap[id]['children'] 
        } 
        
        const treeItem = itemMap[id]; 
        
        if (pid === 0) { 
            result.push(treeItem); 
        } else { 
            if (!itemMap[pid]) { 
                itemMap[pid] = { 
                    children: [], 
                } 
            } 
            itemMap[pid].children.push(treeItem) 
        } 
    } 
    return result; 
}

本文参考:# 试了十几个高级前端,竟然连(扁平数据结构转Tree)都写不出来juejin.cn/post/698390…

原文章还考虑到了时间复杂度和空间复杂度的问题。值得一读。