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中获取元素的几种方式小结
Jul 05 Javascript
replace()方法查找字符使用示例
Oct 28 Javascript
Json和Jsonp理论实例代码详解
Nov 15 Javascript
Javascript快速排序算法详解
Dec 03 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
对Js OOP编程 创建对象的一些全面理解
Jul 26 Javascript
jQuery 插件封装的方法
Nov 16 Javascript
w3c编程挑战_初级脚本算法实战篇
Jun 23 Javascript
Node.js中流(stream)的使用方法示例
Jul 16 Javascript
在vue中给列表中的奇数行添加class的实现方法
Sep 05 Javascript
p5.js实现故宫橘猫赏秋图动画
Oct 23 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 保留小数点
2009/04/21 PHP
基于PHP Web开发MVC框架的Smarty使用说明
2013/04/19 PHP
php数据库备份还原类分享
2014/03/20 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
php文件上传的两种实现方法
2016/04/04 PHP
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
Javascript中的Array数组对象详谈
2014/03/03 Javascript
js阻止浏览器默认行为的简单实例
2016/05/15 Javascript
js实现旋转木马效果
2017/03/17 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
2019/08/02 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
[39:18]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第二场 12.17
2020/12/19 DOTA
Python性能优化技巧
2015/03/09 Python
Python中的localtime()方法使用详解
2015/05/22 Python
python中import reload __import__的区别详解
2017/10/16 Python
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
ubuntu中配置pyqt4环境教程
2017/12/27 Python
python爬取各类文档方法归类汇总
2018/03/22 Python
python实现的MySQL增删改查操作实例小结
2018/12/19 Python
说说如何遍历Python列表的方法示例
2019/02/11 Python
Python socket 套接字实现通信详解
2019/08/27 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
赫里福德的一家乡村零售商店:Philip Morris & Son
2017/06/25 全球购物
Mytheresa中国官网:德国时尚奢侈品商城
2017/08/04 全球购物
公司企业表扬信
2014/01/11 职场文书
小学生环保倡议书
2014/05/15 职场文书
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
素质教育培训心得体会
2016/01/19 职场文书
我的收音机情缘
2022/04/05 无线电