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 相关文章推荐
js和as的稳定传值问题解决
Jul 14 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
May 06 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
May 17 Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 Javascript
浅谈React 属性和状态的一些总结
Nov 21 Javascript
js读取json文件片段中的数据实例
Mar 09 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 Javascript
Vuex新手的理解与使用详解
May 31 Javascript
Vue使用axios引起的后台session不同操作
Aug 14 Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 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
全国中波电台频率表
2020/03/11 无线电
使用php重新实现PHP脚本引擎内置函数
2007/03/06 PHP
php+ajax实现无刷新分页的方法
2014/11/04 PHP
php中的动态调用实例分析
2015/01/07 PHP
php解决DOM乱码的方法示例代码
2016/11/20 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
总结PHP内存释放以及垃圾回收
2018/03/29 PHP
静态页面的值传递(三部曲)
2006/09/25 Javascript
Code:findPosX 和 findPosY
2006/12/20 Javascript
javascript下判断一个对象是否具有指定名称的属性的的代码
2010/01/11 Javascript
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
js页面跳转的常用方法整理
2013/10/18 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
vue的路由映射问题及解决方案
2019/10/14 Javascript
[04:19]完美世界携手游戏风云打造 卡尔工作室模型介绍篇
2013/04/24 DOTA
用Python编写一个简单的FUSE文件系统的教程
2015/04/02 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
python监控键盘输入实例代码
2018/02/09 Python
python实现扫描日志关键字的示例
2018/04/28 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
pygame实现烟雨蒙蒙下彩虹雨
2019/11/11 Python
Python使用tkinter实现摇骰子小游戏功能的代码
2020/07/02 Python
pandas参数设置的实用小技巧
2020/08/23 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
中专生毕业自我鉴定
2013/11/01 职场文书
消防宣传口号
2014/06/16 职场文书
2014年国庆节寄语
2014/09/19 职场文书
推广普通话主题班会
2015/08/17 职场文书
Python&Matlab实现樱花的绘制
2022/04/07 Python
golang三种设计模式之简单工厂、方法工厂和抽象工厂
2022/04/10 Golang