JS實(shí)現(xiàn)樹形結(jié)構(gòu)與數(shù)組結(jié)構(gòu)相互轉(zhuǎn)換并在樹形結(jié)構(gòu)中查找對(duì)象
總是有很多需求是關(guān)于處理樹形結(jié)構(gòu)的,所以不得不總結(jié)幾個(gè)常見操作的寫法。
首先假設(shè)有一個(gè)樹形結(jié)構(gòu)數(shù)據(jù)如下
var tree=[ { 'id': '1', 'name': '教學(xué)素材管理', 'children':[ { 'id': '101', 'name': '教學(xué)素材', 'children':[ { 'id': '10101', 'name': '修改', }, { 'id': '10102', 'name': '添加', } ] }, { 'id': '102', 'name': '測(cè)試試題', }, { 'id': '103', 'name': '問題任務(wù)', } ] }, { 'id': '2', 'name': '基礎(chǔ)數(shù)據(jù)管理', 'children':[ { 'id': '201', 'name': '專業(yè)設(shè)置', }, { 'id': '202', 'name': '專業(yè)管理', } ] } ]
1、如何在tree中找到id=10102的對(duì)象?
思路一:深度遍歷,從頂點(diǎn)開始,當(dāng)前節(jié)點(diǎn)有子節(jié)點(diǎn)則遍歷當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)(遞歸)。
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é)點(diǎn)的所有子節(jié)點(diǎn),再?gòu)牡谝粋€(gè)子節(jié)點(diǎn)開始依次遍歷。
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)換為有父子關(guān)系屬性的數(shù)組結(jié)構(gòu)?
思路一:初始化一個(gè)空數(shù)組,從tree的頂端開始遍歷,當(dāng)前節(jié)點(diǎn)有子節(jié)點(diǎn)時(shí),一邊繼續(xù)遍歷子節(jié)點(diǎn),一邊在當(dāng)前節(jié)點(diǎn)上刪除子節(jié)點(diǎn),將當(dāng)前節(jié)點(diǎn)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)
用之前測(cè)試生成的數(shù)組試一下
結(jié)果如上,完美的生成了最初的樹形結(jié)構(gòu)。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JavaScript樹形結(jié)構(gòu)數(shù)組處理之遞歸問題
- JS前端二維數(shù)組生成樹形結(jié)構(gòu)示例詳解
- JavaScript數(shù)組扁平轉(zhuǎn)樹形結(jié)構(gòu)數(shù)據(jù)(Tree)的實(shí)現(xiàn)
- JavaScript平鋪數(shù)組轉(zhuǎn)樹形結(jié)構(gòu)的實(shí)現(xiàn)示例
- 如何將JavaScript將數(shù)組轉(zhuǎn)為樹形結(jié)構(gòu)
- JavaScript 實(shí)現(xiàn)普通數(shù)組數(shù)據(jù)轉(zhuǎn)化為樹形數(shù)據(jù)結(jié)構(gòu)的步驟說明
相關(guān)文章
小程序?qū)崿F(xiàn)簡(jiǎn)單語(yǔ)音聊天的示例代碼
這篇文章主要介紹了小程序?qū)崿F(xiàn)簡(jiǎn)單語(yǔ)音聊天的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07JS的時(shí)間格式化和時(shí)間戳轉(zhuǎn)換函數(shù)示例詳解
這篇文章主要介紹了JS的時(shí)間格式化和時(shí)間戳轉(zhuǎn)換函數(shù),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07一個(gè)非常好用的文字滾動(dòng)的案例,鼠標(biāo)懸浮可暫停[兩種方案任選]
本文主要介紹了非常好用的文字滾動(dòng)的案例,鼠標(biāo)懸浮可暫停的兩種實(shí)現(xiàn)方案,代碼簡(jiǎn)潔,可收藏備用。需要的朋友來看下吧2016-12-12JQuery 表格操作(交替顯示、拖動(dòng)表格行、選擇行等)
JQuery 表格操作包括交替顯示、拖動(dòng)表格行、選擇行等功能,大家可以參考下。2009-07-07JS實(shí)現(xiàn)單張或多張圖片持續(xù)無縫滾動(dòng)的示例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)單張或多張圖片持續(xù)無縫滾動(dòng)效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05用javascript實(shí)現(xiàn)gb2312轉(zhuǎn)utf-8的腳本
用javascript實(shí)現(xiàn)gb2312轉(zhuǎn)utf-8的腳本...2007-05-05