JavaScript实现无限级递归树的示例代码


Posted in Javascript onMarch 29, 2019

需求

最近遇到一个需求,平时被后台惯着直接返回了树形结构给到前端,前端对这种嵌套类型的数据(如地区的级联或菜单的树形结构)省掉了一层处理。换了个后台开发返回了扁平化的数组数据给到前端自己去处理如下data。突然有点慌......

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": 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,
  }
]

JavaScript实现无限级递归树的示例代码

emmm,换个念头想想也刚好锻炼锻炼,撸起袖子干吧,然后就总结了以下两种整理方法~

方法一——递归

在这种那么适合递归的场景,怎么能少了递归这个角色呢?第一种方法,递归出场!献上递归宝器~

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
  }
  return tree(pid) // 第一级节点的父id,是null或者0,视情况传入
}

恩,姿势摆好,在控制台里执行一下

JavaScript实现无限级递归树的示例代码

哎哟,不错哦~后台小哥哥再也不担心需要返回什么数据给我了。不过,该方法有个缺点,在我使用组件的时候需要的数据结构中,如果子级没有数据children返回[]。恩,有点问题,但是还是可以优化的,优化的代码我会那么容易给出来吗?你已经是个成熟的程序猿了,需要学会自己优化代码了!!!

方法二——对象

对象在我眼里一直是倚天屠龙宝刀的存在,了解到其中的奥妙便形同有一武林秘籍傍身。当然,没用好就相当于一堆废铁,甚至将导致一些不可预料的结果。

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

console.log(setTreeData(data)); // 输出整理后的数据

结果我就不执行了,跟递归的结果相似。相比起递归,我更喜欢这种方法。不过这种方法有一种容易犯错的地方,就是它会改变原数据,我就在这里踩了好久的坑,所以一开始采用了删除children的初始化了一遍。 记住了吗,没记住自行重复说三遍!!!

总结

以上简单介绍了两种将扁平化数据转化为递归树的方法,学会了吗,没学会再回去好好撸撸码!!目前我遇到需要将数据整理树形结构的主要在菜单栏或分类的树形结构上,当然还有像省市这种有从属关系的结构。不过就算以后遇到了都唔驶惊啦~恩,继续更新总结中....

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery timers计时器简单应用说明
Oct 28 Javascript
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
js使用ajax读博客rss示例
May 06 Javascript
jquery浏览器滚动加载技术实现方案
Jun 03 Javascript
浅谈jQuery 选择器和dom操作
Jun 07 Javascript
自制微信公众号一键排版工具
Sep 22 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
JavaScript函数节流和函数防抖之间的区别
Feb 15 Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 Javascript
p5.js实现斐波那契螺旋的示例代码
Mar 22 Javascript
在Vue项目中使用d3.js的实例代码
May 01 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
Mar 29 #Javascript
详解a标签添加onclick事件的几种方式
Mar 29 #Javascript
node(koa2) web应用模块介绍详解
Mar 29 #Javascript
Vue js 的生命周期(看了就懂)(推荐)
Mar 29 #Javascript
浅谈js闭包理解
Mar 28 #Javascript
微信小程序中转义字符的处理方法
Mar 28 #Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 #Javascript
You might like
那些年一起学习的PHP(二)
2012/03/21 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
PHP实现图片裁剪、添加水印效果代码
2014/10/01 PHP
php利用cookies实现购物车的方法
2014/12/10 PHP
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
PHP5.3新特性小结
2016/02/14 PHP
PHP使用自定义方法实现数组合并示例
2016/07/07 PHP
如何在JavaScript中实现私有属性的写类方式(二)
2013/12/04 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
js实现防止被iframe的方法
2015/07/03 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
javascript中Number的方法小结
2016/11/21 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
玩转Koa之koa-router原理解析
2018/12/29 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
vue 实现动态路由的方法
2020/07/06 Javascript
nodejs中使用worker_threads来创建新的线程的方法
2021/01/22 NodeJs
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
Python高斯消除矩阵
2019/01/02 Python
浅析python redis的连接及相关操作
2019/11/07 Python
Python vtk读取并显示dicom文件示例
2020/01/13 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
OpenCV读取与写入图片的实现
2020/10/13 Python
Python 实现键盘鼠标按键模拟
2020/11/18 Python
Pytorch 中的optimizer使用说明
2021/03/03 Python
瑞士隐形眼镜和护理产品网上商店:Linsenklick
2019/10/21 全球购物
《桃林那间小木屋》教学反思
2014/05/01 职场文书
弄虚作假心得体会
2014/09/10 职场文书
群众对十八届四中全会的期盼
2014/10/17 职场文书
2015国庆节宣传语
2015/07/14 职场文书