给定一个数组结构,使用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)
相关推荐
不一样的少年_4 分钟前
明明做了很多事,为什么简历看起来还是没含金量?
前端·后端·招聘
mashang1234567897 分钟前
mac安装SnailGitLite并配置Beyond Compare
前端·macos
雪芽蓝域zzs8 分钟前
第三十四节:用户新增编辑弹窗增加 el‑tree‑select 部门选择器
前端·javascript·vue.js
程序员老赵17 分钟前
Docker 部署 go2rtc:轻松搭建摄像头多协议流媒体平台
前端·docker·直播
酷酷的逗逗乐26 分钟前
前端转 Agent 开发 · 第三节:LangChain 提示词模板
前端
Cache技术分享28 分钟前
516. Java 方法句柄 - 转换(进阶篇·下)
前端·后端
妙码生花28 分钟前
全网 8k star 的 BuildAdmin 正式发布 Golang 版本,这次我们在CRUD赛道杀死了比赛。
前端·后端·ai编程
写代码像蔡徐抻30 分钟前
三年了,AI为何还没有抢走程序员饭碗?
前端·后端·面试
梦曦i34 分钟前
unix-router v0.1.0 首发:uni-app x 的 vue-router 风格路由库
前端·uni-app
Linsk37 分钟前
妙用:focus解决0到auto高度过渡的边界场景
前端·css