给定一个数组结构,使用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)
相关推荐
kungggyoyoyo19 小时前
TRAE中国版SOLO模式上线!我用它从0到1开发了一款AI小说编辑器
前端·vue.js·trae
ohyeah19 小时前
栈:那个“先进后出”的小可爱,其实超好用!
前端·数据结构
心随雨下19 小时前
typescript中Triple-Slash Directives如何使用
前端·javascript·typescript
自在极意功。19 小时前
AJAX 深度详解:从基础原理到项目实战
前端·ajax·okhttp
s***45319 小时前
SpringBoot返回文件让前端下载的几种方式
前端·spring boot·后端
海上彼尚19 小时前
[逆向] 1.本地登录爆破
前端·安全
什么时候吃饭19 小时前
vue2、vue3父子组件嵌套生命周期执行顺序
前端·vue.js
2501_9409439119 小时前
体系课\ Python Web全栈工程师
开发语言·前端·python
q***064719 小时前
SpringSecurity相关jar包的介绍
android·前端·后端
低保和光头哪个先来19 小时前
场景2:Vue Router 中 query 与 params 的区别
前端·javascript·vue.js·前端框架