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学习7 操作JavaScript对象和集合的函数
Feb 07 Javascript
本地对象Array的原型扩展实现代码
Dec 04 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
Dec 14 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
如何解决hover在ie6中的兼容性问题
Dec 15 Javascript
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
微信小程序实现图片翻转效果的实例代码
Sep 20 Javascript
jQuery实现可编辑的表格
Dec 11 jQuery
原生js实现点击按钮复制内容到剪切板
Nov 19 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 MemCached 高级缓存应用代码
2010/08/05 PHP
深入file_get_contents与curl函数的详解
2013/06/25 PHP
详解PHP中的PDO类
2015/07/06 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
js 替换
2008/02/19 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
2010/04/02 Javascript
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
zTree树形插件异步加载方法详解
2017/06/14 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
vue2 全局变量的设置方法
2018/03/09 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
Python设计实现的计算器功能完整实例
2017/08/18 Python
使用Python实现微信提醒备忘录功能
2018/12/04 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
美国时尚在线:Showpo
2017/09/08 全球购物
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
Merchant 1948澳大利亚:新西兰领先的鞋类和靴子供应商
2018/03/24 全球购物
土木工程毕业生自荐信
2013/09/21 职场文书
幼儿园小班家长寄语
2014/04/02 职场文书
服务承诺口号
2014/05/22 职场文书
资产运营委托书范本
2014/10/16 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
祝福语集锦:送给闺蜜的生日祝福语
2019/10/08 职场文书
2019年圣诞节祝福语集锦
2019/12/25 职场文书
吃通javascript正则表达式
2021/04/21 Javascript
浅析Python中的随机采样和概率分布
2021/12/06 Python