一文带你吃透js处理树状结构数据的增删改查
【摘要】 目录问题描述：JS处理树状结构的增删改查解决方案：1、新增节点2、删除节点3、修改节点4、查找节点问题描述：JS处理树状结构的增删改查 最近在开发一个后台管理系统的权限管理模块，涉及到各种树状结构的数据处理逻辑，例如：增，删，改，查等；相比普通的数组结构数据，树状结构的处理就没有数组那么的直观，但是也没那么复杂，需要多一步——递归查找来对数据进行深度遍历操作，那么这里呢，博...
目录
问题描述：JS处理树状结构的增删改查
最近在开发一个后台管理系统的权限管理模块，涉及到各种树状结构的数据处理逻辑，例如：增，删，改，查等；相比普通的数组结构数据，树状结构的处理就没有数组那么的直观，但是也没那么复杂，需要多一步——递归查找来对数据进行深度遍历操作，那么这里呢，博主也将开发过程中总结出来的方法分享给大家，一文带你吃透JS树装结构数据处理：
数据结构示例
let data = [{
id: 1,
label: '一级 1',
children: [{
id: 4,
label: '二级 1-1',
children: [{
id: 9,
label: '三级 1-1-1'
}, {
id: 10,
label: '三级 1-1-2'
}]
}]
}, {
id: 2,
label: '一级 2',
children: [{
id: 5,
label: '二级 2-1'
}, {
id: 6,
label: '二级 2-2'
}]
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1'
}, {
id: 8,
label: '二级 3-2'
}]
}];
解决方案：
1、新增节点
查找树装结构的指定节点，新增子节点，代码如下：
const appendNodeInTree = (id, tree, obj) => {
tree.forEach(ele=> {
if (ele.id === id) {
ele.children ? ele.children.push(obj) : ele.children = [obj]
} else {
if (ele.children) {
appendNodeInTree(id, ele.children, obj)
}
}
})
return tree
}
2、删除节点
查找树装结构的指定节点，删除节点，代码如下
const removeNodeInTree=(treeList, id)=> { // 通过id从数组（树结构）中移除元素
if (!treeList || !treeList.length) {
return
}
for (let i = 0; i < treeList.length; i++) {
if (treeList[i].id === id) {
treeList.splice(i, 1);
break;
}
removeNodeInTree(treeList[i].children, id)
}
}
3、修改节点
递归查找并修改某个节点的状态，代码如下：
const updateNodeInTree=(treeList,id, obj)=> {
if (!treeList || !treeList.length) {
return;
}
for (let i = 0; i < treeList.length; i++) {
if (treeList[i].id == id) {
treeList[i]= obj;
break;
}
setTreeListNodeFalse(treeList[i].children,id,obj);
}
}4、查找节点
递归查找树形节点的某个节点，代码：
const findNodeInTree = (data, key, callback) => {
for (let i = 0; i < data.length; i++) {
if (data[i].key == key) {
return callback(data[i], i, data)
}
if (data[i].children) {
findNodeInTree (data[i].children, key, callback)
}
}
}
// 所查找到的节点要存储的方法
let Obj={}
findNodeInTree(data, key, (item, index, arr) => {
Obj = item
})
// 此时就是Obj对应的要查找的节点
console.log(Obj)总结
本文介绍了js如何处理树装数据结构的增删改查，掌握以上函数，基本可以应对同样业务类型的数据处理，更多js处理数据问题方面的疑难杂症，推荐查看博主之前总结的文章，喜欢博主的朋友可以给博主点个关注，点关注，不迷路，博主带你上高速~~
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）