如何全面掌握JS处理树状结构数据的增删改查技巧？

本文共计789个文字，预计阅读时间需要4分钟。

目录+问题描述+解决方案+1. 新增节点+2. 删除节点+3. 修改节点+4. 查找节点+总结+问题描述+JS处理树状结构的增删改查+最近在开发一个后台管理系统，涉及到权限管理模块，包括各种树状结构的增删改查功能

目录

• 问题描述
• 解决方案
• 1、新增节点
• 2、删除节点
• 3、修改节点
• 4、查找节点
• 总结

问题描述

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树状结构的数据处理(增删改查)的详细内容，更多关于JS树状结构的数据处理的资料请关注自由互联其它相关文章