js实现无限层级树形数据结构(创新算法)
由于做项目的需要，把一个线性数组转成树形数组，在网上查了很多文章，觉得他们写的太复杂了，于是自己写了一个，在折腾了一下午终于把它写出来啦（激动.gif），用两个filter过滤器就搞定了，代码简洁明了，数据结构小白都能看懂。
js代码：把扁平数据转成树形数据
functionsetTreeData(source){
letcloneData=JSON.parse(JSON.stringify(source))//对源数据深度克隆
returncloneData.filter(father=>{//循环所有项，并添加children属性
letbranchArr=cloneData.filter(child=>father.id==child.parentId);//返回每一项的子级数组
branchArr.length>0?father.children=branchArr:''//给父级添加一个children属性，并赋值
returnfather.parentId==0;//返回第一层
});
}
根据网友给我指出的问题，之前的算法会影响到源数据，之后我对获取的数据进行了深度克隆，完美解决。
封装函数：
functiontreeData(source,id,parentId,children){
letcloneData=JSON.parse(JSON.stringify(source))
returncloneData.filter(father=>{
letbranchArr=cloneData.filter(child=>father[id]==child[parentId]);
branchArr.length>0?father[children]=branchArr:''
returnfather[parentId]==0//如果第一层不是parentId=0，请自行修改
})
}
//调用时，字段名以字符串的形式传参，如treeData(source,'id','parentId','children')
实例1：使用element-ui的组件制作一个树形多级嵌套伸缩菜单栏
实现效果：
vue组件：
Demo
树形数据转成扁平数据，请查看这篇文章：js实现树形数据转成扁平数据
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。