js实现单层数组转多层树

 更新时间:2023年06月29日 10:18:05   作者:iru  
这篇文章主要介绍了js实现单层数组转多层树方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

js单层数组转多层树

在很多场景下由于区分授权,比如菜单或组织机构等,给当前用户返回的往往可能不是以固定的父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;
}

js一维(无嵌套单层)数组转树结构数组(多维嵌套数组)

适用elementui(tree),根据项中的项的parentId与其他项中的id比较,相同,则将这个项添加到对应的id项中

有一维数组如

在这里插入图片描述

想要等到以下的数据格式

在这里插入图片描述

先循环出祖先级的项,再根据id与parentId,递归获得最终数据:

let newArray = [];
arr.forEach(res => {
   if(res.parentId === 0) {
        newArray.push(res);
    }
});
this.arrToTree(arr, newArray) ;
console.log(newArray);  // 最终得到的新数组;
function arrToTree(list, arr) {
    arr.forEach(res => {
        list.forEach((ret, index) => {
            if(res.id === ret.parentId) {
                if(!res.hasOwnProperty('children')){
                    res.children = [];
                };
                res.children.push(ret);
            }
        })
        if(res.hasOwnProperty('children')) {
            this.arrToTree(list, res.children);
        }
    })
}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue中使用cropperjs的方法

    vue中使用cropperjs的方法

    这篇文章给大家总结了在.vue文件里cropperjs的使用方法和经验教训,感兴趣的朋友跟随脚本之家小编学习吧
    2018-03-03
  • JavaScript实现前端飞机大战小游戏

    JavaScript实现前端飞机大战小游戏

    这篇文章主要为大家详细介绍了JavaScript实现前端飞机大战小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • JavaScript中Blob的具体实现

    JavaScript中Blob的具体实现

    Blob常用于处理文件数据、图像数据、音频数据,本文主要介绍了JavaScript中URL和Blob的具体实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-08-08
  • 解析JavaScript中 querySelector 与 getElementById 方法的区别

    解析JavaScript中 querySelector 与 getElementById 方法的区别

    这篇文章主要介绍了JavaScript中 querySelector 与 getElementById 方法的区别,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-10-10
  • 网页自动跳转代码收集

    网页自动跳转代码收集

    网页自动跳转代码收集
    2009-09-09
  • jquery库文件略庞大用纯js替换jquery的方法

    jquery库文件略庞大用纯js替换jquery的方法

    jquery库文件略庞大,因此在某些情况下就需要用纯js替换jquery,需要的朋友可以参考下
    2014-08-08
  • js实现文字跑马灯效果

    js实现文字跑马灯效果

    本文主要介绍了js实现文字超过显示宽度每间隔1s自动向左滚动显示的跑马灯效果,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • JavaScript实现获取网络通信进度

    JavaScript实现获取网络通信进度

    这篇文章主要为大家详细介绍了如何使用Fetch API和XMLHttpRequest(XHR)来执行网络请求,并重点说明如何获取这两种方法的网络请求进度,感兴趣的可以了解下
    2023-12-12
  • 使用Chart.js图表库制作漂亮的响应式表单

    使用Chart.js图表库制作漂亮的响应式表单

    数据包围着我们。虽然搜索引擎和其他应用都对基于文本方式表示的数据偏爱有加,但人们发现可视化是更容易理解的一种方式。今年初,SitePoint 发表了 Aurelio 的文章《 Chart.js简介》。在深入研究 Chart.js 的功能后,本文将会讲解这篇简介的一些重点。
    2015-10-10
  • 微信小程序批量监听输入框对按钮样式进行控制的实现代码

    微信小程序批量监听输入框对按钮样式进行控制的实现代码

    这篇文章主要介绍了小程序批量监听输入框对按钮样式进行控制的实现代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10

最新评论