JS的有关递归的知识点(数据无限级联的实现)
所用测试数据:
const data = [ { "area_id": 5, "name": "广东省", "parent_id": 0, }, { "area_id": 6, "name": "广州市", "parent_id": 5, }, { "area_id": 7, "name": "深圳市", "parent_id": 5, }, { "area_id": 9, "name": "昌平区", "parent_id": 4, }, { "area_id": 4, "name": "北京市", "parent_id": 3, }, { "area_id": 3, "name": "北京", "parent_id": 0, }, { "area_id": 2, "name": "测试子地区", "parent_id": 1, }, { "area_id": 1, "name": "测试地区", "parent_id": 0, } ]
递归实现无限级数据:
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, label: item.name, children: tree(item.area_id) }) }) return arr.length>0?arr:"" } return tree(pid) // 第一级节点的父id,是null或者0,视情况传入 } var tmp=toTreeData(data,0); console.log(tmp);
对象的方式实现无限级数据维护
function setTreeData(arr) { // 删除所有 children,以防止多次调用 arr.forEach(function (item) { delete item.children; }); let map = {}; // 构建map arr.forEach(i => { map[i.area_id] = i; // 构建以area_id为键 当前数据为值 }); let treeData = []; arr.forEach(child => { const mapItem = map[child.parent_id]; // 判断当前数据的parent_id是否存在map中 if (mapItem) { // 存在则表示当前数据不是最顶层数据 // 注意: 这里的map中的数据是引用了arr的它的指向还是arr,当mapItem改变时arr也会改变,踩坑点 (mapItem.children || ( mapItem.children = [] )).push(child); // 这里判断mapItem中是否存在children, 存在则插入当前数据, 不存在则赋值children为[]然后再插入当前数据 } else { // 不存在则是组顶层数据 treeData.push(child); } }); return treeData; };
总结:递归其实遇到数据格式类似且嵌套的时候会使用到
相关推荐
steeven 2020-11-10
Tips 2020-10-14
nongfusanquan0 2020-08-18
清溪算法君老号 2020-06-27
清溪算法 2020-06-21
RememberMePlease 2020-06-17
nurvnurv 2020-06-05
SystemArchitect 2020-06-02
清溪算法 2020-05-27
清溪算法 2020-05-25
LczPtr 2020-05-25
举 2020-05-20
徐建岗网络管理 2020-05-10
steeven 2020-05-09
Tips 2020-05-03
猛禽的编程艺术 2020-05-01