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) : []
    );
  }, []);
}
复制代码

 

posted @   blackbentel  阅读(364)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示