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+css 网页每次加载不同样式的实现方法
Dec 27 Javascript
Bootstrap基础学习
Jun 16 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
Sep 06 Javascript
js实现三级联动效果(简单易懂)
Mar 27 Javascript
Web前端框架Angular4.0.0 正式版发布
Mar 28 Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 Javascript
如何让node运行es6模块文件及其原理详解
Dec 11 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
Sep 25 Javascript
JS实现基本的网页计算器功能示例
Jan 16 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 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
php中simplexml_load_string使用实例分享
2014/02/13 PHP
php使用cookie显示用户上次访问网站日期的方法
2015/01/26 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
php实现的递归提成方案实例
2015/11/14 PHP
JavaScript中的this实例分析
2011/04/28 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
2014/03/18 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
jQuery学习笔记之创建DOM元素
2015/01/19 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
2015/03/24 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
vue2组件之select2调用的示例代码
2017/10/12 Javascript
Vue实现PopupWindow组件详解
2018/04/28 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
vue prop属性传值与传引用示例
2019/11/13 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
2020/02/19 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
2020/05/31 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
[04:23]DOTA2上海特锦赛小组赛第一日 TOP10精彩集锦
2016/02/27 DOTA
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
python 常见的反爬虫策略
2020/09/27 Python
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
客户代表自我评价范例
2013/09/24 职场文书
物业保安主管岗位职责
2013/12/25 职场文书
接受捐赠答谢词
2014/01/27 职场文书
婚前协议书怎么写
2014/04/15 职场文书
婚礼新人答谢词
2015/01/04 职场文书
消防安全月活动总结
2015/05/08 职场文书
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript