JS实现树形结构与数组结构相互转换并在树形结构中查找对象

第JS实现树形结构与数组结构相互转换并在树形结构中查找对象总是有很多需求是关于处理树形结构的，所以不得不总结几个常见操作的写法。

首先假设有一个树形结构数据如下

vartree=[

'id':'1',

'name':'教学素材管理',

'children':[

'id':'101',

'name':'教学素材',

'children':[

'id':'10101',

'name':'修改',

'id':'10102',

'name':'添加',

},{

'id':'102',

'name':'测试试题',

'id':'103',

'name':'问题任务',

},{

'id':'2',

'name':'基础数据管理',

'children':[

'id':'201',

'name':'专业设置',

'id':'202',

'name':'专业管理',

]

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

思路一：深度遍历，从顶点开始，当前节点有子节点则遍历当前节点的子节点（递归）。

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;

}

调用：

vargetNode=deepQuery(tree,10102);

console.log(getNode)

思路二：广度遍历，遍历根节点的所有子节点，再从第一个子节点开始依次遍历。

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;

}

调用：

vargetNode=breadthQuery(tree,10102);

console.log(getNode);

2、如何将树形结构转换为有父子关系属性的数组结构？

思路一：初始化一个空数组，从tree的顶端开始遍历，当前节点有子节点时，一边继续遍历子节点，一边在当前节点上删除子节点，将当前节点push到空数组。

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);

结果：

3、如何将数组结构转换为树形结构？

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

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;

}