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 相关文章推荐
JSQL  一个 web DB 的封装
May 05 Javascript
js文件包含的几种方式介绍
Sep 28 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
jquery中filter方法用法实例分析
Feb 06 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
Sep 05 Javascript
vue-music关于Player播放器组件详解
Nov 28 Javascript
解决vue接口数据赋值给data没有反应的问题
Aug 27 Javascript
vue 点击按钮实现动态挂载子组件的方法
Sep 07 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 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实现mysql数据库备份类
2008/03/20 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
JavaScript 事件对象的实现
2009/07/13 Javascript
jQuery.clean使用方法及思路分析
2013/01/07 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
jquery实现焦点轮播效果
2017/02/23 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
2017/07/05 Javascript
jquery实现左右轮播图效果
2017/09/28 jQuery
详解Vue单元测试case写法
2018/05/24 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
webpack+express实现文件精确缓存的示例代码
2020/06/11 Javascript
Python3.x中自定义比较函数
2015/04/24 Python
python控制台中实现进度条功能
2015/11/10 Python
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
Python在图片中添加文字的两种方法
2017/04/29 Python
python实现按长宽比缩放图片
2018/06/07 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
Django中的用户身份验证示例详解
2019/08/07 Python
Python有参函数使用代码实例
2020/01/06 Python
基于Python实现人脸自动戴口罩系统
2020/02/06 Python
J2EE面试题
2016/03/14 面试题
五心教育心得体会
2014/09/04 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书
2016年学校综治宣传月活动总结
2016/03/16 职场文书
分布式架构Redis中有哪些数据结构及底层实现原理
2022/03/13 Redis
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫
Java版 简易五子棋小游戏
2022/05/04 Java/Android