给定一个数组结构,使用map 生成过一个树形结构

思路:

1、遍历数组结构
2、给每个元素,生成 tree node
3、找到parentNode, 并加入它的children
js 复制代码
const arr = [
    { id: 1, name: "部门A", parentId: 0 },
    { id: 2, name: "部门B", parentId: 1 },
    { id: 3, name: "部门C", parentId: 1 },
    { id: 4, name: "部门D", parentId: 2 },
    { id: 5, name: "部门E", parentId: 2 },
    { id: 6, name: "部门F", parentId: 3 },
]

function toTree(arr) {
    const idToTreeNode = new Map()
    let root = null
    arr.forEach(item => {
        const { id, name, parentId } = item
        // 定义tree node 并加入map
        const treeNode = { id, name }
        idToTreeNode.set(id, treeNode)
        // 找到parentNode 并加入到它的children
        const parentNode = idToTreeNode.get(parentId)
        if (parentNode) {
            if (parentNode.children == null) parentNode.children = []
            parentNode.children.push(treeNode)
        }
        if (parentId === 0) root = treeNode
    })
    return root
}

const show = toTree(arr)
console.log('show', show)
相关推荐
海绵宝龙10 分钟前
前端网页录屏是怎么实现的
前端
勇往直前plus24 分钟前
python格式化字符串
开发语言·前端·python
恋猫de小郭29 分钟前
Flutter 的真正价值是什么?深度解析再结合鸿蒙,告诉你 Flutter 的真正优势
android·前端·flutter
micro_xx30 分钟前
Matlab 有限元分析三维悬臂梁变形
前端·数据库·matlab
web3.088899934 分钟前
获得某红书笔记评论说明-item_review
服务器·前端·数据库
UrbanJazzerati44 分钟前
Vue 3 全局错误处理详解与示例
前端
木斯佳1 小时前
前端八股文面经大全:小红书前端日常实习(2026-1-5)·面经深度解析
前端
HelloReader1 小时前
Trunk + Tauri 前端配置Rust/WASM 项目如何稳定接入桌面与移动端(Trunk 0.17.5)
前端
小碗细面1 小时前
告别996!Claude Code 6个实用工作流程
前端·人工智能·ai编程
HelloReader1 小时前
Vite + Tauri 2 一套配置同时搞定桌面开发、调试体验、iOS 真机联调(Vite 5.4.8)
前端