JS實現(xiàn)樹形結(jié)構(gòu)與數(shù)組結(jié)構(gòu)相互轉(zhuǎn)換并在樹形結(jié)構(gòu)中查找對象
總是有很多需求是關于處理樹形結(jié)構(gòu)的,所以不得不總結(jié)幾個常見操作的寫法。
首先假設有一個樹形結(jié)構(gòu)數(shù)據(jù)如下
var tree=[ { 'id': '1', 'name': '教學素材管理', 'children':[ { 'id': '101', 'name': '教學素材', 'children':[ { 'id': '10101', 'name': '修改', }, { 'id': '10102', 'name': '添加', } ] }, { 'id': '102', 'name': '測試試題', }, { 'id': '103', 'name': '問題任務', } ] }, { 'id': '2', 'name': '基礎數(shù)據(jù)管理', 'children':[ { 'id': '201', 'name': '專業(yè)設置', }, { 'id': '202', 'name': '專業(yè)管理', } ] } ]
1、如何在tree中找到id=10102的對象?
思路一:深度遍歷,從頂點開始,當前節(jié)點有子節(jié)點則遍歷當前節(jié)點的子節(jié)點(遞歸)。
function deepQuery(tree,id) { var isGet = false; var retNode = null; function deepSearch(tree,id){ for(var i = 0; i<tree.length; i++) { if(tree[i].children && tree[i].children.length>0) { deepSearch(tree[i].children,id); } if(id === tree[i].id || isGet) { isGet||(retNode = tree[i]); isGet = true; break; } } } deepSearch(tree,id); return retNode; }
調(diào)用:
var getNode = deepQuery(tree,10102); console.log(getNode)
思路二:廣度遍歷,遍歷根節(jié)點的所有子節(jié)點,再從第一個子節(jié)點開始依次遍歷。
function breadthQuery(tree, id) { var stark = []; stark = stark.concat(tree); while(stark.length) { var temp = stark.shift(); if(temp.children) { stark = stark.concat(temp.children); } if(temp.id === id) { return temp; } } }
調(diào)用:
var getNode=breadthQuery(tree,10102); console.log(getNode);
2、如何將樹形結(jié)構(gòu)轉(zhuǎn)換為有父子關系屬性的數(shù)組結(jié)構(gòu)?
思路一:初始化一個空數(shù)組,從tree的頂端開始遍歷,當前節(jié)點有子節(jié)點時,一邊繼續(xù)遍歷子節(jié)點,一邊在當前節(jié)點上刪除子節(jié)點,將當前節(jié)點push到空數(shù)組。
function flatten1(tree) { var arr = []; function spread(tree,pid) { for (var i=0; i < tree.length; i++ ) { item = tree[i] let {id,name}=item; arr.push({id,name,pid}) if (item.children) { spread(item.children,item.id) delete item.children } } } spread(tree,0) return arr; } var newArr = flatten1(tree);
思路二:
function flatten2 (data,pid) { return data.reduce((arr, {id, name, children = []}) => arr.concat([{id, name,pid}], flatten2(children,id)), []) } var newArr = flatten2(tree,0);
結(jié)果:
3、如何將數(shù)組結(jié)構(gòu)轉(zhuǎn)換為樹形結(jié)構(gòu)?
下面是偶然看到一位大佬很秀的寫法(原文鏈接)
function treeData(data){ let cloneData = JSON.parse(JSON.stringify(data)) return cloneData.filter(parent=>{ let branchArr = cloneData.filter(child => parent['id'] == child['pid']); branchArr.length>0 ? parent['children'] = branchArr : ''; return parent['pid'] == 0 ; }) }
調(diào)用:
var newTree = treeData(newArr)
用之前測試生成的數(shù)組試一下
結(jié)果如上,完美的生成了最初的樹形結(jié)構(gòu)。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- JavaScript樹形結(jié)構(gòu)數(shù)組處理之遞歸問題
- JS前端二維數(shù)組生成樹形結(jié)構(gòu)示例詳解
- JavaScript數(shù)組扁平轉(zhuǎn)樹形結(jié)構(gòu)數(shù)據(jù)(Tree)的實現(xiàn)
- JavaScript平鋪數(shù)組轉(zhuǎn)樹形結(jié)構(gòu)的實現(xiàn)示例
- 如何將JavaScript將數(shù)組轉(zhuǎn)為樹形結(jié)構(gòu)
- JavaScript 實現(xiàn)普通數(shù)組數(shù)據(jù)轉(zhuǎn)化為樹形數(shù)據(jù)結(jié)構(gòu)的步驟說明
相關文章
JS的時間格式化和時間戳轉(zhuǎn)換函數(shù)示例詳解
這篇文章主要介紹了JS的時間格式化和時間戳轉(zhuǎn)換函數(shù),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07一個非常好用的文字滾動的案例,鼠標懸浮可暫停[兩種方案任選]
本文主要介紹了非常好用的文字滾動的案例,鼠標懸浮可暫停的兩種實現(xiàn)方案,代碼簡潔,可收藏備用。需要的朋友來看下吧2016-12-12JS實現(xiàn)單張或多張圖片持續(xù)無縫滾動的示例代碼
這篇文章主要介紹了JS實現(xiàn)單張或多張圖片持續(xù)無縫滾動效果,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05用javascript實現(xiàn)gb2312轉(zhuǎn)utf-8的腳本
用javascript實現(xiàn)gb2312轉(zhuǎn)utf-8的腳本...2007-05-05