给定一个数组结构,使用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)
相关推荐
ybc465218 小时前
React、Next安全漏洞问题修复和自测
前端·安全·next.js
huali18 小时前
社区划分:让AI理解你的代码重构意图
前端·javascript·vue.js
掘金安东尼18 小时前
⏰前端周刊第446期(2025年12月22日–12月27日)
前端
不老刘18 小时前
前端面试八股文:单线程的JavaScript是如何实现异步的
前端·javascript·面试
J总裁的小芒果18 小时前
后端返回参数不一致 前端手动处理key
前端·vue.js·elementui
闲云一鹤18 小时前
【工具篇】使用 nvm 进行 node 版本管理
前端·npm·node.js
指尖跳动的光18 小时前
web网页如何禁止别人移除水印
前端·javascript·css
chenbin___18 小时前
JavaScript 中!!、?? 和 || 使用介绍
前端·javascript·vue.js
chilavert31818 小时前
技术演进中的开发沉思-279 AJax :Rich Text Editor(下)
前端·javascript·ajax