JavaScript如何處理樹狀結構數據的增刪改查

這篇文章主要介紹“JavaScript如何處理樹狀結構數據的增刪改查”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“JavaScript如何處理樹狀結構數據的增刪改查”文章能幫助大家解決問題。

問題描述：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;
????????}
????????updateNodeInTree(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)

關于“JavaScript如何處理樹狀結構數據的增刪改查”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注蝸牛博客行業資訊頻道，小編每天都會為大家更新不同的知識點。

免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：niceseo99@gmail.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。