js单层数组转多层树

最新推荐文章于 2024-08-04 22:59:26 发布

iru

最新推荐文章于 2024-08-04 22:59:26 发布

阅读量1k

点赞数

分类专栏：前端文章标签：前端 javascript 列表转树

本文链接：https://blog.youkuaiyun.com/weixin_38800446/article/details/123268787

版权

前端专栏收录该内容

9 篇文章

订阅专栏

该博客介绍了如何在不确定父ID的情况下，通过遍历列表并构建映射，动态地将列表转换为树形结构。算法首先遍历一次构建映射，然后再次遍历将元素依据父ID添加到对应的子元素集合中，形成完整的树数据。这种方法适用于菜单、组织结构等需要根据权限动态构建树状结构的场景。

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

在很多场景下由于区分授权，比如菜单或组织机构等，给当前用户返回的往往可能不是以固定的父id来标识数据的根节点。这种情况下就需要动态的根据当前数组本身自动判断构造树。
理论就是根据父id，在数组或树中查找，如果在元素中找到对应id，那么就追加为子元素。如果找不到，那当前元素就是定级元素。

/**
 * 列表转为树，pid值未知。思路：第一遍遍历构造为map，第二遍
 * @param {*} list 
 * @returns 
 */
 export function listToTree(list) {
  let treeData = []
  // 第一次遍历，构造一个map
  let tmpObj = {}
  list.forEach(item => { // 这里也可以把值设置为数组的索引，这样的话在这里可以不必存储这么大空间了
    tmpObj[item.id] = item
  });
  list.forEach(v => {
    const parent = tmpObj[v.parentId]
    // 如果有parentId并且在临时map中存在
    if (v.parentId && parent) {
      // 那么把当前元素追加到目标元素children之内，并且把当前key删除
      if (!parent.children) {
        parent.children = []
      }
      parent.children.push(v)
    } else {
      treeData.push(v)
    }
  })
  // 再遍历，根据pid在map中找是否有key，如果有，说明是上级，那么追加到children中；如果没有，那么就跳过，表示没有上级
  return treeData;
}