作为一名前端开发同学，在与后端进行数据联调时，我们前端同学处理最多的数据是Array数组结构，list，table,card我们将使用数组来处理任何需要遍历的显示。当数组涉及到的层级嵌套是我们的数组结构时，我们就需要转换成Tree树结构。常见的有目录树组件、区域选择组件等。这种树状结构的数据，前后端都可以处理。当后端有时返回一个数组给前端处理时，我们直接处理即可。数组结构转树结构例如：我们需要将下面的数组结构转换成树状嵌套结构：/**数组结构数据*/constarrayData=[{id:2,title:'China',parent_id:0},{id:3,title:'广东省',parent_id:2},{id:4,title:'广州市',parent_id:3},{id:5,title:'天河区',parent_id:4},{id:6,title:'湖南省',parent_id:2},{id:1,title:'俄罗斯',parent_id:0}]递归方法需要分成两个函数完成返回递归函数主要处理搜索id添加子项，转换函数返回结果/***递归搜索添加子项*@param{arraydata}data*@param{storereturnresult}result*@param{parentid}pid*/functiongetChildren(data,result,pid){for(constitemofdata){if(item.parent_id===pid){constnewItem={children:[],...item}结果。push(newItem)getChildren(data,newItem.children,我tem.id)}}}/***转换方法*@param{arraydata}data*@param{parentid}pid*@returns*/functionarrayToTree(data,pid){letresult=[]getChildren(data,结果,pid)返回结果}console.log(arrayToTree(arrayData,0));使用loop方法使用数组的reduce方法将data数组转化为对象保存在对象变量obj中，每一项的id作为是对象的键；遍历data数组，判断parent_id===0为第一层数组对象，push到result数组；继续遍历，找到父站点，在2中我们发现数组的第一层会作为其他层的父层例如：第一轮constparent=obj[item.parent_id]这个父对象对应title=ChinaorRussianodewithparent_id===0，以此类推在这个父对象中。添加children属性，直到他没有parent_id和自己id相同的孩子：/***将数组结构转换为树结构*@param{*}dataarraydata*@returns*/functionarrayToTree(data){constresult=[]constobj=data.reduce((pre,cur)=>{pre[cur.id]=curreturnpre},{})for(letitemofdata){if(item.parent_id===0){result.push(item)continue}if(item.parent_idinobj){constparent=obj[item.parent_id];parent.children=parent.children||[];parent.children.push(item);}}returnresult}转换后的结果图：树结构转Array结构例如：我们要将下面的树结构转换成扁平化的一维数组：/**树结构数据treeData*/consttreeData=[{id:2,title:'中国',parent_id:0,children:[{id:3,title:'广东省',parent_id:2,children:[{id:4,title:'广州市',parent_id:3,children:[{id:5,title:'day河区',parent_id:4}]}]},{id:6,title:'湖南省',parent_id:2}]},{id:1,title:'俄罗斯',parent_id:0,},]使用递归的方法使用数组的reduce方法解构数组的每一项。如果有children，使用concat逐层提取，让每个objectitem都包裹在一个[]下：/***树结构数组展平*@param{*}数据树结构数组*@returns*/functiontreeToArray(data){returndata.reduce((pre,cur)=>{const{children=[],...item}=cur;返回pre.concat([{...item}],treeToArray(children))},[]);}reduce()方法为数组中的每个元素执行一个序列，由你提供的reducer函数，每次运行reducer时，会将前一个元素的计算结果作为参数传入，最后将结果汇总为一个单一的返回值。concat()方法用于合并两个或多个数组。此方法不会改变现有数组，而是返回一个新数组。使用循环方法Tree结构，根据ID查找路径。在使用目录的时候，会有这样的要求。根据ID查找目录的路径也是递归实现。遍历树结构数组，判断id是否为当前项的id，返回当前目录名；判断当前项是否有子项并据此递归。/***根据id查找目录路径*@param{树结构数组数据}tree*@param{id要查找}id*@param{初始路径}path*@returns*/functionparseTreePath(tree,id,path=""){for(leti=0;i
