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 Jquery 遍历Json的实现代码
Mar 31 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
Dec 09 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
JavaScript实现的多种鼠标拖放效果
Nov 03 Javascript
简单介绍jsonp 使用小结
Jan 27 Javascript
Backbone.js框架中简单的View视图编写学习笔记
Feb 14 Javascript
基于socket.io+express实现多房间聊天
Mar 17 Javascript
基于JS实现数字+字母+中文的混合排序方法
Jun 06 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
Dec 21 Javascript
使用webpack3.0配置webpack-dev-server教程
May 29 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 Javascript
用几道面试题来看JavaScript执行机制
Apr 30 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
Yii CGridView用法实例详解
2016/07/12 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
jQuery实现二级下拉菜单效果
2016/01/05 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
详解vue之自行实现派发与广播(dispatch与broadcast)
2021/01/19 Vue.js
python笔记(1) 关于我们应不应该继续学习python
2012/10/24 Python
Python中运行并行任务技巧
2015/02/26 Python
Python自动调用IE打开某个网站的方法
2015/06/03 Python
Python中的字典与成员运算符初步探究
2015/10/13 Python
使用Python绘制图表大全总结
2017/02/11 Python
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
python如何实现内容写在图片上
2018/03/23 Python
PyCharm更改字体和界面样式的方法步骤
2019/09/27 Python
分享8点超级有用的Python编程建议(推荐)
2019/10/13 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
中东奢侈品市场:Coveti
2019/05/12 全球购物
毕业生找工作的自我评价
2013/10/18 职场文书
高校自主招生自荐信
2013/12/09 职场文书
党支部公开承诺书
2014/03/28 职场文书
庆元旦演讲稿
2014/09/15 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
水电施工员岗位职责
2015/04/11 职场文书
2015年幼儿园班主任工作总结
2015/05/12 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书
MySQL数据库配置信息查看与修改方法详解
2022/06/25 MySQL