给定一个数组结构,使用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)
相关推荐
不会算法的小灰14 小时前
Vue.js 基础教程:从入门到实践
前端·javascript·vue.js
掘金一周15 小时前
没开玩笑,全框架支持的 dialog 组件,支持响应式| 掘金一周 11.6
前端·人工智能
拉不动的猪15 小时前
浏览器&Websocket&热更新
前端·javascript·vue.js
im_AMBER15 小时前
React 12
前端·javascript·笔记·学习·react.js·前端框架
开开心心就好15 小时前
电脑音质提升:杜比全景声安装详细教程
java·开发语言·前端·数据库·电脑·ruby·1024程序员节
午安~婉16 小时前
HTML CSS八股
前端·css·html
有事没事实验室16 小时前
css变量
前端·css
前端付豪16 小时前
Vue 中的 JSX:让组件渲染更灵活的正确方式
前端·javascript·vue.js
在泡泡里16 小时前
前端规范【四】eslint(antfu)、lefthook、commitlint
前端
烛阴16 小时前
Python 几行代码,让你的照片秒变艺术素描画
前端·python