JS的有关递归的知识点(数据无限级联的实现）

Posted 2021-02-21 不靠谱设计

所用测试数据：

 1 const data = [
 2   {
 3     "area_id": 5,
 4     "name": "广东省",
 5     "parent_id": 0,
 6   }, 
 7   {
 8     "area_id": 6,
 9     "name": "广州市",
10     "parent_id": 5,
11   },
12   {
13     "area_id": 7,
14     "name": "深圳市",
15     "parent_id": 5,
16   },
17   {
18     "area_id": 9,
19     "name": "昌平区",
20     "parent_id": 4,
21   },
22   {
23     "area_id": 4,
24     "name": "北京市",
25     "parent_id": 3,
26   },
27   {
28     "area_id": 3,
29     "name": "北京",
30     "parent_id": 0,
31   },
32   {
33     "area_id": 2,
34     "name": "测试子地区",
35     "parent_id": 1,
36   },
37   {
38     "area_id": 1,
39     "name": "测试地区",
40     "parent_id": 0,
41   }
42 ]

View Code

递归实现无限级数据：

 1 function toTreeData(data,pid){
 2   function tree(id) {
 3     let arr = []
 4     data.filter(item => {
 5       return item.parent_id === id;
 6     }).forEach(item => {
 7       arr.push({
 8         area_id: item.area_id,
 9         label: item.name,
10         children: tree(item.area_id)
11       })
12     })
13     return arr.length>0?arr:""
14   }
15   return tree(pid) // 第一级节点的父id，是null或者0，视情况传入
16 }
17 var tmp=toTreeData(data,0);
18 console.log(tmp);

View Code

对象的方式实现无限级数据维护

 1 function setTreeData(arr) {
 2   // 删除所有 children,以防止多次调用
 3   arr.forEach(function (item) {
 4       delete item.children;
 5   });
 6   let map = {}; // 构建map
 7   arr.forEach(i => {
 8     map[i.area_id] = i; // 构建以area_id为键 当前数据为值
 9   });
10 
11   let treeData = [];
12   arr.forEach(child => {
13     const mapItem = map[child.parent_id]; // 判断当前数据的parent_id是否存在map中
14 
15     if (mapItem) { // 存在则表示当前数据不是最顶层数据
16     
17       // 注意: 这里的map中的数据是引用了arr的它的指向还是arr，当mapItem改变时arr也会改变,踩坑点
18       (mapItem.children || ( mapItem.children = [] )).push(child); // 这里判断mapItem中是否存在children, 存在则插入当前数据, 不存在则赋值children为[]然后再插入当前数据
19     } else { // 不存在则是组顶层数据
20       treeData.push(child);
21     }
22   });
23 
24   return treeData;
25 };

View Code

总结：递归其实遇到数据格式类似且嵌套的时候会使用到