前面我们封装了一维数组(具备树形结构相关属性)处理成树形结构的方法:https://www.cnblogs.com/coder--wang/p/15013664.html
接下来我们来一波反向操作,封装一个可以将树形结构的数据扁平化的方法。这种场景在业务中还是很常见的,比如一个级联选择器,有时候你需要判断某个id或者某个字段,是否存在于该级联选择器的多维数组中,亦或者你需要将该多维数组中的字段进行处理,那么此时,对这个树形的复杂数组进行降维就显得很有必要了!下面直接上代码:
1 /** 2 * 3 * @param {Array} arrs 树形数据 4 * @param {string} childs 树形数据子数据的属性名,常用'children' 5 * @param {Array} attrArr 需要提取的公共属性数组(默认是除了childs的全部属性) 6 * @returns 7 */ 8 function extractTree(arrs,childs,attrArr){ 9 let attrList = []; 10 if(!Array.isArray(arrs)&&!arrs.length)return []; 11 if(typeof childs !== 'string')return []; 12 if(!Array.isArray(attrArr)||Array.isArray(attrArr)&&!attrArr.length){ 13 attrList = Object.keys(arrs[0]); 14 attrList.splice(attrList.indexOf(childs), 1); 15 }else{ 16 attrList = attrArr; 17 } 18 let list = []; 19 const getObj = (arr)=>{ 20 arr.forEach(function(row){ 21 let obj = {}; 22 attrList.forEach(item=>{ 23 obj[item] = row[item]; 24 }); 25 list.push(obj); 26 if(row[childs]){ 27 getObj(row[childs]); 28 } 29 }) 30 return list; 31 } 32 return getObj(arrs); 33 }
运行:
收工!对树形结构数据的组装和降维都已经实现,希望给大家带来一些帮助,有bug或不足欢迎给我留言哦~
更多项目中常见的方法封装,传送门:https://github.com/wangruibin666/wang-utils
脚踏实地行,海阔天空飞~
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!