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 相关文章推荐
网页常用特效代码整理
Jun 23 Javascript
百度留言本js 大家可以参考下
Oct 13 Javascript
Extjs实现进度条的两种便捷方式
Sep 26 Javascript
教你用jquery实现iframe自适应高度
Jun 11 Javascript
使用Raygun来自动追踪AngularJS中的异常
Jun 23 Javascript
基于javascript实现彩票随机数生成(简单版)
Apr 17 Javascript
微信小程序 生命周期函数详解
May 24 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
Vue中this.$router.push参数获取方法
Feb 27 Javascript
axios 处理 302 状态码的解决方法
Apr 10 Javascript
Js图片点击切换轮播实现代码
Jul 27 Javascript
JavaScript代码实现简单计算器
Dec 27 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操作文件方法问答
2007/03/16 PHP
php处理斐波那契数列非递归方法
2012/02/04 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
多浏览器兼容的获取元素和鼠标的位置的js代码
2009/12/15 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
2013/11/13 Javascript
jquery text()方法取标签中的文本
2014/07/25 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
解决vue点击控制单个样式的问题
2018/09/05 Javascript
layui表格分页 记录勾选的实例
2019/09/02 Javascript
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
windows环境下tensorflow安装过程详解
2018/03/30 Python
在django模板中实现超链接配置
2019/08/21 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
python 密码学示例——理解哈希(Hash)算法
2020/09/21 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
使用html5制作loading图的示例
2014/04/14 HTML / CSS
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
中专毕业生的自荐书
2014/07/01 职场文书
汉语专业毕业生自荐信
2014/07/06 职场文书
英语教育专业毕业生求职信
2014/08/28 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
妈妈别哭观后感
2015/06/08 职场文书
战友聚会致辞
2015/07/28 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书
PHP控制循环操作的时间
2021/04/01 PHP
OpenCV-Python 实现两张图片自动拼接成全景图
2021/06/11 Python
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript