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 相关文章推荐
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
Mar 21 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
jquery实现清新实用的网页菜单效果
Aug 28 Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 Javascript
Node.js获取前端ajax提交的request信息
Feb 20 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
Apr 14 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
express 项目分层实践详解
Dec 10 Javascript
webpack中的模式(mode)使用详解
Feb 20 Javascript
JS array数组检测方式解析
May 19 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
PHP5.0正式发布 不完全兼容PHP4 新增多项功能
2006/10/09 PHP
用php或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
PHP高并发和大流量解决方案整理
2021/03/09 PHP
破除一些网站复制、右键限制
2006/11/04 Javascript
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
才发现的超链接js导致网页中GIF动画停止的解决方法
2007/11/02 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
2013/11/25 Javascript
javascript中全局对象的parseInt()方法使用介绍
2013/12/19 Javascript
JavaScript中的单引号和双引号报错的解决方法
2014/09/01 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
JavaScript基础篇(6)之函数表达式闭包
2015/12/11 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
vue组件jsx语法的具体使用
2018/05/21 Javascript
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
全面解析Python的While循环语句的使用方法
2015/10/13 Python
django+echart数据动态显示的例子
2019/08/12 Python
python 哈希表实现简单python字典代码实例
2019/09/27 Python
pymysql模块使用简介与示例
2020/11/17 Python
python实现图片转字符画的完整代码
2021/02/21 Python
西班牙美妆电商:Perfume’s Club(有中文站)
2018/08/08 全球购物
公司活动策划方案
2014/01/13 职场文书
优秀毕业生自我鉴定
2014/01/19 职场文书
共产党员公开承诺书
2014/03/25 职场文书
励志演讲稿范文
2014/04/29 职场文书
市委常委会班子党的群众路线教育实践活动整改方案
2014/10/25 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
倡议书的格式写法
2015/04/28 职场文书
六年级作文之关于梦
2019/10/22 职场文书
Mysql官方性能测试工具mysqlslap的使用简介
2021/05/21 MySQL
在Spring-Boot中如何使用@Value注解注入集合类
2021/08/02 Java/Android
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers