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 相关文章推荐
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 Javascript
javascript实现促销倒计时+fixed固定在底部
Sep 18 Javascript
jquery操作checkbox实现全选和取消全选
May 02 Javascript
jQuery搜索同辈元素方法
Feb 10 Javascript
利用JQuery实现datatables插件的增加和删除行功能
Jan 06 Javascript
Javascript基础回顾之(二) js作用域
Jan 31 Javascript
微信小程序分页加载的实例代码
Jul 11 Javascript
Vue组件Draggable实现拖拽功能
Dec 01 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
JS前端广告拦截实现原理解析
Feb 17 Javascript
JavaScript异步操作的几种常见处理方法实例总结
May 11 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
Jul 09 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中$_SERVER的详细参数与说明
2008/07/29 PHP
php全排列递归算法代码
2012/10/09 PHP
基于php-fpm的配置详解
2013/06/03 PHP
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
2014/06/07 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
JsonServer安装及启动过程图解
2020/02/28 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
Python数据结构与算法之列表(链表,linked list)简单实现
2017/10/30 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
jupyter 导入csv文件方式
2020/04/21 Python
django创建css文件夹的具体方法
2020/07/31 Python
python缩进长度是否统一
2020/08/02 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
世界上最大的在线旅行社新加坡网站:Expedia新加坡
2016/08/25 全球购物
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
程序员跳槽必看面试题总结
2013/06/28 面试题
好听的队名和口号
2014/06/09 职场文书
领导班子四风对照检查材料范文
2014/09/27 职场文书
2015年幼儿园中班工作总结
2015/04/25 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书