需求

最近遇到一个需求，通常是后台用来直接把树结构返回给前端。前端为这种嵌套类型的数据保存了一层处理(例如区域的级联或菜单的树形结构)。更改了后台开发，将平面数组数据返回给前端，由前端自行处理以下数据。突然有点慌了.

Const data=[{'area _ id' : 5，' name' : '广东省'，' parent _ id' : 0，}，{'area _ id' : 6，' name' : '广州'，' parent _ id '“' area _ id ' : 7，' name': '深圳'，' parent _ id' : 5，}，{'area _ id' : 4，' Name ' 33: '北京

Emmm，换个角度想，就运动一下，挽起袖子做，然后总结以下两种整理方法~

方法1 ——递归

在这样一个如此适合递归的场景中，我们怎么能失去递归的作用呢？第一种方法，递归外观！给个递归宝~

function toTreeData(data，PID){ function tree(id){ let arr=[]data . filter(item={ return item . parent _ id===id；}).foreach (item={arr。push ({area _ id: item。area _ id，标签:项目。名称，children:树(项目。area _ id)}))return arr } return tree(PID)//一级节点的父节点id为

哦，还不错~后台的小哥哥再也不用担心给我回什么数据了。然而，这种方法有一个缺点。在我使用组件时需要的数据结构中，如果子级中没有数据，子级将返回[]。嗯，有问题，但还是可以优化的。我会这么容易给出优化后的代码吗？你已经是一个成熟的程，所以你需要学会优化自己的代码！

方法2 ——对象

在我眼里，对象一直是倚天屠龙剑的存在。知道它的秘密就像拥有一个武术秘密。当然，无用相当于一堆废铁，甚至会导致一些不可预知的结果。

函数setTreeData(arr) {//删除所有子级，以防止多次调用arr.foreach(函数(item){ delete item . children；});让map={ }；//build maparr . foreach(I={ map[I . area _ id]=I；//用area_id作为键作为值来构建当前数据})；让treeData=[]；arr . foreach(child={ const MapItem=map[child . parent _ id]；//判断当前数据的parent_id在map中是否存在if(mapItem){//如果存在，说明当前数据不是顶层数据。//注意这里地图中的数据是指arr的其他点还是arr。当mapitem改变时，arr也会改变，踩坑(mapitem。children | | (mapitem。children=[]))//这里判断mapItem中是否存在children，如果存在则插入当前数据，如果不存在则将children赋值为[]，然后插入当前数据} else {//如果不存在则是顶层数据treedata . push(child)；} });返回treeData};console . log(setTreeData(data))；//我不会执行排序数据结果的输出，类似于递归结果。比起递归，我更喜欢这个方法。但是这个方法容易出错，就是会改变原来的数据，所以我在这里踩了很久的坑，所以我从删除子对象的初始化开始。记住，不记得，重复自己三遍！

摘要

上面简单介绍了两种将平面数据转换成递归树的方法。你学会了吗？我还没学会回去清理代码！目前我遇到过主要在菜单栏或者分类树形结构上把数据组织成树形结构的需求，当然也有像省市这样的下属结构。不过，即使以后遇到也不会觉得意外~好吧，继续更新总结.

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。