This article will take you through js to deal with the addition, deletion, modification and inspection of tree structure data

Table of Contents

Problem description: JS handles tree structureCRUD

Solution:

1. New node

2. Delete node

3. Modify node

4. Find node

---

Problem description: JS handles addition, deletion, modification and checking of tree structures

Recently I am developing a permission management module of a background management system, which involves data processing logic of various tree structures, such as adding, deleting, changing, checking, etc. Compared with ordinary array structure data, tree structure dataThe processing is not as intuitive as the array, but it is not so complicated. It needs one more step-recursive search to perform a deep traversal operation on the data. Then here, the blogger will also share the methods summed up in the development process with everyone.You understand JS tree structure data processing:

Data structure example

 let data = [{id: 1,label: 'Level 1',children: [{id: 4,label: 'Secondary 1-1',children: [{id: 9,label: 'Level 3 1-1-1'}, {id: 10,label: 'Level 3 1-1-2'}]}]}, {id: 2,label: 'Level 2',children: [{id: 5,label: 'Secondary 2-1'}, {id: 6,label: 'Secondary 2-2'}]}, {id: 3,label: 'Level 3',children: [{id: 7,label: 'Secondary 3-1'}, {id: 8,label: 'Secondary 3-2'}]}];

Solution:

1. New node

Find the specified node of the tree structure and add a new child node, the code is as follows:

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, delete node

Find the specified node of the tree structure and delete the node, the code is as follows

const removeNodeInTree=(treeList, id)=> { // remove element from array (tree structure) by idif (!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. Modify node

Recursively find and modify the state of a node, the code is as follows:

 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;}updateNodeInTree(treeList[i].children,id,obj);}}

4. Find node

Recursively find a node of the tree node, code:

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)}}}// The method to store the found nodelet Obj={}findNodeInTree(data, key, (item, index, arr) => {Obj = item})// This is the node to be found corresponding to Objconsole.log(Obj)

---

Summary

This article introduces how js handles the addition, deletion, modification and query of tree-mounted data structures. Mastering the above functions can basically deal with data processing of the same business type. For more intricate problems in js processing data problems, it is recommended to view the blogger's previous summaryFriends who like bloggers can pay attention to bloggers, pay attention, don't get lost, bloggers will take you on the highway~~

Facing 5 Common Difficulties of JavaScript Data Processing_'s Blog-CSDN Blog This article introduces 5 common data processing problems in the process of JavaScript development - array addition, deletion, modification and inspection, array deduplication, array sorting, and levelingStructure to tree structure, array object de-overlapping and merging, etc. and provide corresponding solutions, basically covering the use requirements in the daily development process, reading this article can greatly improve your basic skills of javaScript, when receiving development requirements, can respond quickly and provide solutions.…[here is picture 002]https://blog.csdn.net/m0_61243965/article/details/125084028?spm=1001.2014.3001.5502