一文吃透JS樹狀結(jié)構(gòu)的數(shù)據(jù)處理(增刪改查)
問題描述
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)示例
let data = [{
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),代碼如下:
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、刪除節(jié)點(diǎn)
查找樹裝結(jié)構(gòu)的指定節(jié)點(diǎn),刪除節(jié)點(diǎn),代碼如下
const removeNodeInTree=(treeList, id)=> { // 通過id從數(shù)組(樹結(jié)構(gòu))中移除元素
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、修改節(jié)點(diǎn)
遞歸查找并修改某個(gè)節(jié)點(diǎn)的狀態(tài),代碼如下:
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、查找節(jié)點(diǎn)
遞歸查找樹形節(jié)點(diǎn)的某個(gè)節(jié)點(diǎn),代碼:
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)
}
}
}
// 所查找到的節(jié)點(diǎn)要存儲(chǔ)的方法
let Obj={}
findNodeInTree(data, key, (item, index, arr) => {
Obj = item
})
// 此時(shí)就是Obj對(duì)應(yīng)的要查找的節(jié)點(diǎn)
console.log(Obj)
總結(jié)
本文介紹了js如何處理樹裝數(shù)據(jù)結(jié)構(gòu)的增刪改查,掌握以上函數(shù),基本可以應(yīng)對(duì)同樣業(yè)務(wù)類型的數(shù)據(jù)處理
以上就是一文吃透JS樹狀結(jié)構(gòu)的數(shù)據(jù)處理(增刪改查)的詳細(xì)內(nèi)容,更多關(guān)于JS樹狀結(jié)構(gòu)的數(shù)據(jù)處理的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章
相關(guān)文章
BootStrap glyphicons 字體圖標(biāo)實(shí)現(xiàn)方法
字體圖標(biāo)是在 Web 項(xiàng)目中使用的圖標(biāo)字體。接下來通過本文給大家介紹BootStrap glyphicons 字體圖標(biāo)實(shí)現(xiàn)方法,需要的朋友參考下2016-05-05
如何解決Webview和H5緩存問題確保每次加載最新版本的資源詳解
WebView在加載H5頁面時(shí),可能會(huì)因?yàn)榫彺鏅C(jī)制導(dǎo)致用戶看到舊版本的頁面,這篇文章主要介紹了如何解決Webview和H5緩存問題確保每次加載最新版本的資源的相關(guān)資料,需要的朋友可以參考下2025-02-02
js實(shí)現(xiàn)滑動(dòng)到頁面底部自動(dòng)加載更多功能
本文主要分享了js實(shí)現(xiàn)滑動(dòng)到頁面底部自動(dòng)加載更多功能的代碼。具有很好的參考價(jià)值,下面跟著小編一起來看下吧2017-02-02
TypeScript對(duì)于Duck類型和模塊命名空間應(yīng)用
這篇文章主要介紹了TypeScript對(duì)于Duck類型和模塊命名空間應(yīng)用,Duck類型是一種動(dòng)態(tài)類型和多態(tài)形式,在duck類型中,重點(diǎn)是對(duì)象的行為可以做什么,而不是對(duì)象所屬的類型2022-08-08
微信小程序?qū)崿F(xiàn)驗(yàn)證碼獲取倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)驗(yàn)證碼獲取倒計(jì)時(shí)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-02-02
uniapp中全局頁面掛載組件實(shí)戰(zhàn)過程(小程序)
這篇文章主要給大家介紹了關(guān)于uniapp中全局頁面掛載組件(小程序)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用uniapp具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-12-12
JS根據(jù)key值獲取URL中的參數(shù)值及把URL的參數(shù)轉(zhuǎn)換成json對(duì)象
本篇文章主要圍繞js url 參數(shù)值展開話題,js根據(jù)key值獲取url中的參數(shù)值,接著把url的參數(shù)轉(zhuǎn)換成json,感興趣的朋友一起來學(xué)習(xí)吧,本文寫的不好地方還望多多指出批評(píng)建議2015-08-08
IE與Firefox在JavaScript上的7個(gè)不同寫法小結(jié)
盡管那需要用長串的、沉悶的不同分支代碼來應(yīng)付不同瀏覽器的日子已經(jīng)過去,偶爾還是有必要做一些簡單的區(qū)分和目標(biāo)檢測來確保某塊代碼能在用戶的機(jī)器上正常運(yùn)行。2009-09-09

