js 实现 list转换成tree的方法示例(数组到树)


Posted in Javascript onAugust 18, 2019

目标:

JS 将有父子关系的平行数组转换成树形数据

方法:双重遍历,一次遍历parentId,一次遍历id == parendId;

该方法应该能很容易被想到,实现起来也一步一步可以摸索出来;

const oldData = [
  {id:1,name:'boss',parentId:0},
  {id:2,name:'lily',parentId:1},
  {id:3,name:'jack',parentId:1},
  {id:4,name:'john',parentId:2},
  {id:5,name:'boss2',parentId:0},
]


function listToTree(oldArr){
  oldArr.forEach(element => {
    let parentId = element.parentId;
    if(parentId !== 0){
      oldArr.forEach(ele => {
        if(ele.id == parentId){ //当内层循环的ID== 外层循环的parendId时,(说明有children),需要往该内层id里建个children并push对应的数组;
          if(!ele.children){
            ele.children = [];
          }
          ele.children.push(element);
        }
      });
    }
  });
  console.log(oldArr) //此时的数组是在原基础上补充了children;
  oldArr = oldArr.filter(ele => ele.parentId === 0); //这一步是过滤,按树展开,将多余的数组剔除;
  console.log(oldArr)
  return oldArr;
}
listToTree(oldData);

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

Javascript 相关文章推荐
javascript+xml技术实现分页浏览
Jul 27 Javascript
JS 文件大小判断的实现代码
Apr 07 Javascript
javascript中substr,substring,slice.splice的区别说明
Nov 25 Javascript
jquery的选择器的使用技巧之如何选择input框
Sep 22 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
May 20 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
jQuery实现的导航下拉菜单效果示例
Sep 05 Javascript
Node.js使用cookie保持登录的方法
May 11 Javascript
jquery css实现流程进度条
Mar 26 jQuery
深入了解JavaScript词法作用域
Jul 29 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 Javascript
详解ES6 Promise的生命周期和创建
Aug 18 #Javascript
vue-cli3配置与跨域处理方法
Aug 17 #Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
Aug 17 #Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 #Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 #Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 #Javascript
微信小程序框架的页面布局代码
Aug 17 #Javascript
You might like
php基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
php上传文件中文文件名乱码的解决方法
2013/11/01 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
PHP使Laravel为JSON REST API返回自定义错误的问题
2018/10/16 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
jQuery 使用手册(三)
2009/09/23 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
2010/05/10 Javascript
为超链接加上disabled后的故事
2010/12/10 Javascript
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
2017/03/29 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
vue router-link传参以及参数的使用实例
2017/11/10 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
vue实现移动端项目多行文本溢出省略
2020/07/29 Javascript
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
全面了解python字符串和字典
2016/07/07 Python
python编程羊车门问题代码示例
2017/10/25 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
python opencv如何实现图片绘制
2020/01/19 Python
Python自省及反射原理实例详解
2020/07/06 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
法警的竞聘演讲稿
2014/01/02 职场文书
婚前保证书范文
2015/02/28 职场文书
2015年小学二年级班主任工作总结
2015/05/21 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
女方家长婚礼致辞
2015/07/27 职场文书
Spring Boot两种全局配置和两种注解的操作方法
2021/06/29 Java/Android