js递归处理树形结构_js递归树形结构-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_47435082/article/details/129722774

这段代码主要处理从后端获取的树形数据，通过id和pid关系构建新的结构。首先初始化children字段，然后通过menugetOne获取第一层数据，接着使用menuGetData和menuAddTab递归地将子数据添加到对应的父数据children中，最终形成所需结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常见的从后端返回来的树形结构一般是这样的，有一个id和pid，子数据的pid对应着父的id

let obj = [
			  {
			   id:10,
			   pid:0,
			   name:'1',
			   level:0 //等级 
			  },
			  {
			   id:2,
			   pid:10,
			   name:'1-1',
			   level:1
			  },
			  {
			   id:3,
			   pid:2,
			   name:'1-1-1',
			   level:2
			  },
			  {
			   id:4,
			   pid:3,
			   name:'1-1-1-1',
			   level:3
			  },
			  {
			   id:5,
			   pid:3,
			   name:'1-1-1-1-1',
			   level:4
			  },
			  {
			   id:0,
			   pid:0,
			   name:'2',
			   level:0
			  }
			 ]

将它变成这样的结构
在这里插入图片描述
处理代码

let endList = [];
			
			const testFun=function(obj){
			  endList = [];
			   //初始化children字段并初始化路由
			   for (let i = 0; i < obj.length; i++) {
			    obj[i].children = [];
			}
			
			  //取出第一层
			    menugetOne(obj);
			    menuGetData(obj);
			    console.log("end endList: ",endList);
			    // console.log("end obj: ",obj);
			
			 } 
			//获得一级主菜单
			const menugetOne=function(data) {
			  for (let i = 0; i < data.length; i++) {
			      if (!data[i].pid) {//一级主目录
			        endList.push(data[i]);
			      }
			  }
			};
			
			  //获得子页面
			  const  menuGetData=function(data) {
			    for (let i = 0; i < data.length; i++) {
			        if (data[i].pid) {//是处于子页面
			            menuAddTab(endList, data[i]);
			        }
			    }
			}
			const menuAddTab=function(data, item) {
			    for (let j = 0; j < data.length; j++) {
			        // console.log(j,' 一级菜单: ',data[j].title," id: ",data[j].id,"  ");
			        if (data[j].id == item.pid) {
			            //找到了
			            data[j].children.push(item);
			            break;
			        } else {
			            //未找到从children继续找
			            if (data[j].children.length > 0) {
			                menuAddTab(data[j].children, item);
			            }
			        }
			    }
			};
			testFun(obj)