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 相关文章推荐
Google Suggest ;-) 基于js的动态下拉菜单
Oct 11 Javascript
替代window.event.srcElement效果的可兼容性的函数
Dec 18 Javascript
使用非html5实现js板连连看游戏示例代码
Sep 22 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
node.js实现的装饰者模式示例
Sep 06 Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 Javascript
react-native android状态栏的实现
Jun 15 Javascript
vue图片上传本地预览组件使用详解
Feb 20 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
Aug 07 Javascript
原生js无缝轮播插件使用详解
Mar 09 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
May 10 Javascript
解决vue-router的beforeRouteUpdate不能触发
Apr 14 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 adodb连接带密码access数据库实例,测试成功
2008/05/14 PHP
采用PHP函数memory_get_usage获取PHP内存清耗量的方法
2011/12/06 PHP
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
php事件驱动化设计详解
2016/11/10 PHP
jquery动态加载图片数据练习代码
2011/08/04 Javascript
5秒后跳转到另一个页面的js代码
2013/10/12 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
2014/12/16 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
input 禁止输入特殊字符的四种实现方式
2016/08/24 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
Python中if __name__ == "__main__"详细解释
2014/10/21 Python
详解如何利用Cython为Python代码加速
2018/01/27 Python
用Python实现数据的透视表的方法
2018/11/16 Python
python提取包含关键字的整行数据方法
2018/12/11 Python
django Admin文档生成器使用详解
2019/07/22 Python
浅谈Python 递归算法指归
2019/08/22 Python
python实现在线翻译功能
2020/03/03 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
python线程里哪种模块比较适合
2020/08/02 Python
英国买鞋网站:Charles Clinkard
2019/11/14 全球购物
师范应届生教师求职信
2013/11/05 职场文书
医院深入开展党的群众路线教育实践活动实施方案
2014/08/27 职场文书
2014教师年度工作总结
2014/11/10 职场文书
小学新教师个人总结
2015/02/05 职场文书
小学母亲节活动总结
2015/02/10 职场文书
语文教师求职信范文
2015/03/20 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
运动会加油稿
2015/07/22 职场文书
大学生创业计划书常用模板
2019/08/07 职场文书
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏