js 实现 list转换成tree的方法示例（数组到树）
更新时间：2019年08月18日 08:44:06 作者：围墙
这篇文章主要介绍了js 实现 list转换成tree的方法示例（数组到树），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
目标：
JS 将有父子关系的平行数组转换成树形数据
方法：双重遍历，一次遍历parentId,一次遍历id == parendId;
该方法应该能很容易被想到，实现起来也一步一步可以摸索出来；
const oldData = [
{id:1,name:'boss',parentId:0},
{id:2,name:'lily',parentId:1},
{id:3,name:'jack',parentId:1},
{id:4,name:'john',parentId:2},
{id:5,name:'boss2',parentId:0},
]
function listToTree(oldArr){
oldArr.forEach(element => {
let parentId = element.parentId;
if(parentId !== 0){
oldArr.forEach(ele => {
if(ele.id == parentId){ //当内层循环的ID== 外层循环的parendId时，（说明有children），需要往该内层id里建个children并push对应的数组；
if(!ele.children){
ele.children = [];
}
ele.children.push(element);
}
});
}
});
console.log(oldArr) //此时的数组是在原基础上补充了children;
oldArr = oldArr.filter(ele => ele.parentId === 0); //这一步是过滤，按树展开，将多余的数组剔除；
console.log(oldArr)
return oldArr;
}
listToTree(oldData);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了解读函数的节流与防抖问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了小程序卡片切换效果组件wxCardSwiper的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要为大家详细介绍了bootstrap模态框实现拖拽效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
想判断2个js对象，是不是所有完全相同在表单页面应用是很常见的，接下来分享一段判断代码，感兴趣的你可以参考下哈，希望可以帮助到你2013-03-03
这篇文章主要为大家详细介绍了js实现拖拽功能,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
由于业务需求,需要绘制3d地图,所以下面这篇文章主要给大家介绍了关于如何只用echarts做个仿3d地图功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了如何用JS解析剪切板里的excel内容，对解析excel感兴趣的同学，可以参考下2021-04-04
Immutable 是 Facebook 开发的不可变数据集合。不可变数据一旦创建就不能被修改，是的应用开发更简单，允许使用函数式编程技术，比如惰性评估。微信小程序无法直接使用Immutable.js，下面就来说说微信小程序如何使用第三方库Immutable.js。2016-09-09
留言板的主要使用场景是为用户提供一个在网站或应用上留言的平台,本文主要为大家介绍了四个常见的前端实现留言板功能的方法,希望对大家有所帮助2023-11-11
这篇文章主要介绍了简单了解Javscript中兄弟ifream的方法调用文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下2019-06-06
最新评论