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实现仿Windows关机效果
Mar 10 Javascript
javascript 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
Nov 24 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
深入理解JavaScript单体内置对象
Jun 06 Javascript
AngularJS实现在ng-Options加上index的解决方法
Nov 03 Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 Javascript
vue2中的keep-alive使用总结及注意事项
Dec 21 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
Jan 07 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
浅谈电磁辐射对健康的影响
2021/03/01 无线电
php中print(),print_r(),echo()的区别详解
2014/12/01 PHP
既简单又安全的PHP验证码 附调用方法
2016/06/02 PHP
利用PHP生成CSV文件简单示例
2016/12/21 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
JSON与JS对象的区别与对比
2017/03/01 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
vue axios请求拦截实例代码
2018/03/29 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
详解JavaScript之Array.reduce源码解读
2020/11/01 Javascript
[16:14]教你分分钟做大人:米拉娜(HEROS)
2014/11/24 DOTA
python 获取本机ip地址的两个方法
2013/02/25 Python
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
深入理解Python中变量赋值的问题
2017/01/12 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
Python 窗体(tkinter)下拉列表框(Combobox)实例
2020/03/04 Python
Python实现aes加密解密多种方法解析
2020/05/15 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
英国绿色商店:Natural Collection
2019/05/03 全球购物
建筑工程专业学生的自我评价
2013/12/25 职场文书
2014年幼儿园元旦活动方案
2014/02/13 职场文书
万年牢教学反思
2014/02/15 职场文书
彩色的非洲教学反思
2014/02/18 职场文书
我爱我校演讲稿
2014/05/21 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
银行授权委托书范本
2014/10/04 职场文书
2016年员工政治思想表现评语
2015/12/02 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
Python自动化之批量处理工作簿和工作表
2021/06/03 Python
使用 Apache 反向代理的设置技巧
2022/01/18 Servers