第一文吃透JS樹狀結(jié)構(gòu)的數(shù)據(jù)處理(增刪改查)目錄問題描述解決方案1、新增節(jié)點(diǎn)2、刪除節(jié)點(diǎn)3、修改節(jié)點(diǎn)4、查找節(jié)點(diǎn)總結(jié)

問題描述

JS處理樹狀結(jié)構(gòu)的增刪改查

最近在開發(fā)一個(gè)后臺(tái)管理系統(tǒng)的權(quán)限管理模塊，涉及到各種樹狀結(jié)構(gòu)的數(shù)據(jù)處理邏輯，例如：增，刪，改，查等；相比普通的數(shù)組結(jié)構(gòu)數(shù)據(jù)，樹狀結(jié)構(gòu)的處理就沒有數(shù)組那么的直觀，但是也沒那么復(fù)雜，需要多一步遞歸查找來對(duì)數(shù)據(jù)進(jìn)行深度遍歷操作，那么這里呢，博主也將開發(fā)過程中總結(jié)出來的方法分享給大家，一文帶你吃透JS樹裝結(jié)構(gòu)數(shù)據(jù)處理：

數(shù)據(jù)結(jié)構(gòu)示例

letdata=[{

id:1,

label:'一級(jí)1',

children:[{

id:4,

label:'二級(jí)1-1',

children:[{

id:9,

label:'三級(jí)1-1-1'

},{

id:10,

label:'三級(jí)1-1-2'

},{

id:2,

label:'一級(jí)2',

children:[{

id:5,

label:'二級(jí)2-1'

},{

id:6,

label:'二級(jí)2-2'

},{

id:3,

label:'一級(jí)3',

children:[{

id:7,

label:'二級(jí)3-1'

},{

id:8,

label:'二級(jí)3-2'

解決方案

1、新增節(jié)點(diǎn)

查找樹裝結(jié)構(gòu)的指定節(jié)點(diǎn)，新增子節(jié)點(diǎn)，代碼如下：

constappendNodeInTree=(id,tree,obj)={

tree.forEach(ele={

if(ele.id===id){

ele.childrenele.children.push(obj):ele.children=[obj]

}else{

if(ele.children){

appendNodeInTree(id,ele.children,obj)

returntree

2、刪除節(jié)點(diǎn)

查找樹裝結(jié)構(gòu)的指定節(jié)點(diǎn)，刪除節(jié)點(diǎn)，代碼如下

constremoveNodeInTree=(treeList,id)={//通過id從數(shù)組（樹結(jié)構(gòu)）中移除元素

if(!treeList||!treeList.length){

return

for(leti=0;itreeList.length;i++){

if(treeList[i].id===id){

treeList.splice(i,1);

break;

removeNodeInTree(treeList[i].children,id)

3、修改節(jié)點(diǎn)

遞歸查找并修改某個(gè)節(jié)點(diǎn)的狀態(tài)，代碼如下：

constupdateNodeInTree=(treeList,id,obj)={

if(!treeList||!treeList.length){

return;

for(leti=0;itreeList.length;i++){

if(treeList[i].id==id){

treeList[i]=obj;

break;

setTreeListNodeFalse(treeList[i].children,id,obj);

4、查找節(jié)點(diǎn)

遞歸查找樹形節(jié)點(diǎn)的某個(gè)節(jié)點(diǎn)，代碼：

constfindNodeInTree=(data,key,callback)={

for(leti=0;idata.length;i++){

if(data[i].key==key){

returncallback(data[i],i,data)

if(data[i].children){

findNodeInTree(data[i].children,key,callback)

//所查找到的節(jié)點(diǎn)要存儲(chǔ)的方法

letObj={}

findNodeInTree(data,key,(item,index,arr)={

Obj=item

//此時(shí)就是Obj對(duì)應(yīng)的要查找的節(jié)點(diǎn)

console.log(Obj)

總結(jié)

本文介紹了