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 HTML中的table
Apr 15 Javascript
javascript返回顶部效果(自写代码)
Jan 06 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
Jun 19 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
Nov 04 Javascript
本地存储localStorage用法详解
Jul 31 Javascript
angular学习之动态创建表单的方法
Dec 07 Javascript
vue2 中二级路由高亮问题及配置方法
Jun 10 Javascript
微信小程序实现类似微信点击语音播放效果
Mar 30 Javascript
JS eval代码快速解密实例解析
Apr 23 Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
详解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
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
php仿微信红包分配算法的实现方法
2016/05/13 PHP
ThinkPHP实现图片上传操作的方法详解
2017/05/08 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
PHP count_chars()函数讲解
2019/02/14 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
防止登录页面出现在frame中js代码
2014/07/22 Javascript
JQuery选择器、过滤器大整理
2015/05/26 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
2015/09/06 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
用python实现对比两张图片的不同
2018/02/05 Python
python读取中文txt文本的方法
2018/04/12 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
Python批量启动多线程代码实例
2020/02/18 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
运动会通讯稿400字
2014/01/28 职场文书
小学优秀班主任事迹材料
2014/05/17 职场文书
银行招聘自荐信
2015/03/06 职场文书
刮痧观后感
2015/06/05 职场文书
六一文艺汇演主持词
2015/06/30 职场文书
小学体育教学随笔
2015/08/14 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书
最新最全的手机号验证正则表达式
2022/02/24 Javascript