js 树级数组扁平化和扁平化数组整理成树级
1.扁平化数组整理为树级,主要实现方法,过滤出没有父级标识(parentId)的作为列表的第一层,有父级标识的项放在其父级的children下面,也跟数组是引用类型的有很大关系
父级标识为falsy或者 父级为某个特定值(topValue)时,该项就在树级的顶级
最后一层会加上 isLeaf: true 的标识
function list2Tree(list, key = "id", parentKey = "parentId", topId="0") { return list.filter((item, index, arr) => { if (!item[parentKey] || item[parentKey] === topId) { return true } else { const parent = arr.find(data => data[key] === item[parentKey]) item.isLeaf = !arr.some(data => data[parentKey] === item[key]) // 最后一级 if (parent) { parent.children = parent.children || [] parent.children.push(item) } } }) }
2. 树级数组扁平化,主要技术点:reduce方法累计已遍历到的项、递归遍历下级数组
function tree2List(tree) { return tree.reduce((preResult, item, index, arr) => { const { children, ...data } = item; return preResult.concat( data, children && children.length ? tree2List(children) : [] ); }, []); }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通