JS的有关递归的知识点(数据无限级联的实现）
2024-09-08 18:49:23
所用测试数据：
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 ]
递归实现无限级数据：
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 };
总结：递归其实遇到数据格式类似且嵌套的时候会使用到
最新文章
- SQL Sever 博客文章目录(2016-07-06更新)
- STL
- 【DWR系列04】- DWR配置详解
- RecyclerView的介绍与使用
- 策划编写一个新的Helper类
- EasyUI datagrildview导出excel报表
- 《深入理解计算机系统V2》学习指导
- myeclipse编译、输出
- Java反射机制及IoC原理
- 通过url 下载文件
- maven-腾讯SDK(QQ)接口java引入pom配置
- DOM动画效果基础入门
- MySQL Cluster 7.3.3 官方版本下载
- Android WebView中那些不得不解决的坑~~
- Delphi 异或，英文为exclusive OR，或缩写成xor
- QT显示输出及其桌面
- Appium服务器端从启动到case完成的活动分析
- C#高级编程笔记之第二章：核心C#
- bzoj4514 数字配对
- ACA：利用ACA解决TSP优化最佳路径问题——Jason niu