给定一个数组结构,使用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)
相关推荐
布茹 ei ai5 分钟前
地表沉降监测分析系统(vue3前端+python后端+fastapi+网页部署)(开源分享)
前端·python·fastapi
不一样的少年_6 分钟前
WebTab等插件出事后:不到100行代码,带你做一个干净透明的新标签页
前端·javascript·浏览器
幸运小圣6 分钟前
关于Vue 3 <script setup> defineXXX API 总结
前端·javascript·vue.js
500佰9 分钟前
AI 财务案例 普通财务人的AI in ALL
前端·人工智能
军军36010 分钟前
动态星空粒子效果
前端
n***i9512 分钟前
重新定义前端运行时:从浏览器脚本到分布式应用层的架构进化
前端·架构
AAA阿giao14 分钟前
从零开始:用 Vue 3 + Vite 打造一个支持流式输出的 AI 聊天界面
前端·javascript·vue.js
玉宇夕落14 分钟前
Vue 3 实现 LLM 流式输出:从零搭建一个简易 Chat 应用
前端·vue.js
开源之眼14 分钟前
github star都很多的 React Native 和 React 有什么区别?一文教你快速分清
前端
听风说图15 分钟前
AI编程助手为何总是"健忘"?
前端