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

所用测试数据：

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

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

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

相关推荐