JS實(shí)現(xiàn)樹形結(jié)構(gòu)與數(shù)組結(jié)構(gòu)相互轉(zhuǎn)換并在樹形結(jié)構(gòu)中查找對象

第JS實(shí)現(xiàn)樹形結(jié)構(gòu)與數(shù)組結(jié)構(gòu)相互轉(zhuǎn)換并在樹形結(jié)構(gòu)中查找對象總是有很多需求是關(guān)于處理樹形結(jié)構(gòu)的，所以不得不總結(jié)幾個常見操作的寫法。

首先假設(shè)有一個樹形結(jié)構(gòu)數(shù)據(jù)如下

vartree=[

'id':'1',

'name':'教學(xué)素材管理',

'children':[

'id':'101',

'name':'教學(xué)素材',

'children':[

'id':'10101',

'name':'修改',

'id':'10102',

'name':'添加',

},{

'id':'102',

'name':'測試試題',

'id':'103',

'name':'問題任務(wù)',

},{

'id':'2',

'name':'基礎(chǔ)數(shù)據(jù)管理',

'children':[

'id':'201',

'name':'專業(yè)設(shè)置',

'id':'202',

'name':'專業(yè)管理',

]

1、如何在tree中找到id=10102的對象？

思路一：深度遍歷，從頂點(diǎn)開始，當(dāng)前節(jié)點(diǎn)有子節(jié)點(diǎn)則遍歷當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)（遞歸）。

functiondeepQuery(tree,id){

varisGet=false;

varretNode=null;

functiondeepSearch(tree,id){

for(vari=0;itree.length;i++){

if(tree[i].childrentree[i].children.length0){

deepSearch(tree[i].children,id);

if(id===tree[i].id||isGet){

isGet||(retNode=tree[i]);

isGet=true;

break;

deepSearch(tree,id);

returnretNode;

}

調(diào)用：

vargetNode=deepQuery(tree,10102);

console.log(getNode)

思路二：廣度遍歷，遍歷根節(jié)點(diǎn)的所有子節(jié)點(diǎn)，再從第一個子節(jié)點(diǎn)開始依次遍歷。

functionbreadthQuery(tree,id){

varstark=[];

stark=stark.concat(tree);

while(stark.length){

vartemp=stark.shift();

if(temp.children){

stark=stark.concat(temp.children);

if(temp.id===id){

returntemp;

}

調(diào)用：

vargetNode=breadthQuery(tree,10102);

console.log(getNode);

2、如何將樹形結(jié)構(gòu)轉(zhuǎn)換為有父子關(guān)系屬性的數(shù)組結(jié)構(gòu)？

思路一：初始化一個空數(shù)組，從tree的頂端開始遍歷，當(dāng)前節(jié)點(diǎn)有子節(jié)點(diǎn)時，一邊繼續(xù)遍歷子節(jié)點(diǎn)，一邊在當(dāng)前節(jié)點(diǎn)上刪除子節(jié)點(diǎn)，將當(dāng)前節(jié)點(diǎn)push到空數(shù)組。

functionflatten1(tree){

vararr=[];

functionspread(tree,pid){

for(vari=0;itree.length;i++){

item=tree[i]

let{id,name}=item;

arr.push({id,name,pid})

if(item.children){

spread(item.children,item.id)

deleteitem.children

spread(tree,0)

returnarr;

varnewArr=flatten1(tree);

思路二：

functionflatten2(data,pid){

returndata.reduce((arr,{id,name,children=[]})=

arr.concat([{id,name,pid}],flatten2(children,id)),[])

varnewArr=flatten2(tree,0);

結(jié)果：

3、如何將數(shù)組結(jié)構(gòu)轉(zhuǎn)換為樹形結(jié)構(gòu)？

下面是偶然看到一位大佬很秀的寫法（原文鏈接）

functiontreeData(data){

letcloneData=JSON.parse(JSON.stringify(data))

returncloneData.filter(parent={

letbranchArr=cloneData.filter(child=parent['id']==child['pid']);

branchArr.length0parent['children']=branchArr:'';

returnparent['pid']==0;

}