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 顺便学习下CSS选择器 奇偶匹配nth-child(even)
May 24 Javascript
淘宝搜索框效果实现分析
Mar 05 Javascript
js取滚动条的尺寸的函数代码
Nov 30 Javascript
js如何判断不同系统的浏览器类型
Oct 28 Javascript
解决JS外部文件中文注释出现乱码问题
Jul 09 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
Nov 16 Javascript
vue组件之间通信实例总结(点赞功能)
Dec 05 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
Vue分页器实现原理详解
Jun 28 Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 Javascript
如何在CocosCreator里画个炫酷的雷达图
Apr 16 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 JSON 数据解析代码
2010/05/26 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
Laravel实现通过blade模板引擎渲染视图
2019/10/25 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
Javascript引用指针使用介绍
2012/11/07 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
2013/02/22 Javascript
js 窗口抖动示例
2013/09/04 Javascript
jquery设置元素的readonly和disabled的写法
2013/09/22 Javascript
IE中的File域无法清空使用jQuery重设File域
2014/04/24 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
jQuery实现页码跳转式动态数据分页
2017/12/31 jQuery
node中的cookie的具体使用
2018/09/13 Javascript
vue基础之事件v-onclick="函数"用法示例
2019/03/11 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
python实现黑客字幕雨效果
2018/06/21 Python
对python中Json与object转化的方法详解
2018/12/31 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
个人实习生的自我评价
2014/02/16 职场文书
关于责任的演讲稿
2014/05/20 职场文书
建筑工程造价专业自荐信
2014/07/08 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
护士年终考核评语
2014/12/31 职场文书
旅游项目合作意向书
2015/05/08 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书
Python使用scapy模块发包收包
2021/05/07 Python
python munch库的使用解析
2021/05/25 Python