数组转树:数据结构中的经典问题

前言

数组转树是一种常见的数据结构转换操作,目的是将平面的数组数据组织成具有层级关系的树形结构。这种转换在许多实际应用场景中非常有用。很多现实世界的数据本质上是层级结构的,比如文件系统、组织架构、分类目录等。数组通常是扁平化的,而树形结构可以更直观地反映这些层级关系。

递归实现数组转数

js 复制代码
let list = [  
{ "id": 12, "parent_id": 1, "name": "朝阳区" },  
{ "id": 241, "parent_id": 24, "name": "田林街道" },  
{ "id": 31, "parent_id": 3, "name": "广州市" },  
{ "id": 13, "parent_id": 1, "name": "昌平区" },  
{ "id": 2421, "parent_id": 242, "name": "上海科技绿洲" },  
{ "id": 21, "parent_id": 2, "name": "静安区" },  
{ "id": 242, "parent_id": 24, "name": "漕河泾街道" },  
{ "id": 22, "parent_id": 2, "name": "黄浦区" },  
{ "id": 11, "parent_id": 1, "name": "顺义区" },  
{ "id": 2, "parent_id": 0, "name": "上海市" },  
{ "id": 24, "parent_id": 2, "name": "徐汇区" },  
{ "id": 1, "parent_id": 0, "name": "北京市" },  
{ "id": 2422, "parent_id": 242, "name": "漕河泾开发区" },  
{ "id": 32, "parent_id": 3, "name": "深圳市" },  
{ "id": 33, "parent_id": 3, "name": "东莞市" },  
{ "id": 3, "parent_id": 0, "name": "广东省" }  
]

const arrToTree(list,parentId){
     let len=list.length;
     function loop(parentId){
        let res=[];
        for(let i=0;i<len;i++){
            let item=list[i];
            if(item.parent_id===parentId){
               item.children=loop(item.id)
               res.push(item)
            }
        
        }
       return res
     }
  return loop(parentId)
}
 let result= arrToTree(list,0)
 console.log(result);

哈希map

js 复制代码
  function fn(list){
     let obj={}
     let res=[]
     for(let item of list){
         obj[item.id]=item
     }
    for(let item of list){
      if(obj[item.parent_id]){
         (obj[item.parent_id].children||(obj[item.parent_id].children=[])).push(item)
      }else{ 
        res.push(item)
      }
    }
   return res
  }
console.log(fn(list))
相关推荐
前端小L几秒前
专题一:搭建测试驱动环境 (TypeScript + Vitest)
前端·javascript·typescript·源码·vue3
San30.1 分钟前
告别全局污染:深入解析现代前端的模块化 CSS 演进之路
前端·css·vue.js·react.js
程序员鱼皮4 分钟前
干掉 Claude Code,这个开源 AI 编程工具杀疯了?
前端·后端·计算机·ai·程序员
我想吃烤肉肉7 分钟前
wait_until=“domcontentloaded“ 解释
开发语言·前端·javascript·爬虫·python
xkxnq7 分钟前
第一阶段:Vue 基础入门(第 12天)
前端·javascript·vue.js
q_191328469511 分钟前
基于Springboo和vue开发的企业批量排班系统人脸识别考勤打卡系统
前端·javascript·vue.js·spring boot·mysql·毕业设计·人脸识别
BianHuanShiZhe15 分钟前
swift计算文本高度
前端·javascript·html
wtsolutions17 分钟前
Sheet-to-Doc模板设计最佳实践:创建专业的Word模板
前端·javascript·数据库
小二·26 分钟前
Vue 前端性能优化终极指南:Lighthouse 100 分实战(Vue 3 + Vite)
前端·vue.js·性能优化
LYFlied29 分钟前
深入解析服务端渲染(SSR):从原理到实践
前端·性能优化