如何将JavaScript将数组转为树形结构


Posted in Javascript onJune 02, 2021

1.需求

后台给了一个这样的数据让咱前端去转换为树形结构(没有重复数据)。不多说,先来看看给了一个怎样的数组数据,转换为怎样的树形结构。

服务器传过来的数组

const arr = [
      [
        {"deptId":"D019",
        "deptName":"销售部"},
        {"deptId":"D019101",
        "deptName":"华北销售中心"}
      ],[
        {"deptId":"D083",
        "deptName":"音乐事业部"}
      ],[
        {"deptId":"D027",
        "deptName":"杭州研究院"},
        {"deptId":"D027048",
        "deptName":"技术工程事业部"},
        {"deptId":"D027048002",
        "deptName":"项目管理中心"}
      ],[
        {"deptId":"D027",
        "deptName":"杭州研究院"},
        {"deptId":"D027048",
        "deptName":"技术工程事业部"}
      ],[
        {"deptId":"D027",
        "deptName":"杭州研究院"},
        {"deptId":"D027048",
        "deptName":"技术工程事业部"}
      ]
    ]

最终转换为

const arr = [
    {
      deptId: 'D019',
      deptName: '销售部',
      children: [{
        deptId: 'D019101',
        deptName: '华北销售中心',
        children: [],
      }]
    },
    {
      deptId: 'D083',
      deptName: '音乐事业部',
      children: []
    },
    {
      deptId: 'D027',
      deptName: '杭州研究院',
      children: [{
        deptId: 'D027048',
        deptName: '技术工程事业部',
        children: [{
          deptId: 'D027048002',
          deptName: '项目管理中心',
          children: []
        }]
      }]
    },
  ]

2.上代码(在reactHooks中开发)

const [treeData, setTreeData] = useState([]);
  console.log(treeData); //treeData为最终需要的树形结构,(在我本地浏览器打印出来是正确的)
  
  useEffect(() => {
    const str = '[[{"deptId":"D019","deptName":"销售部"},{"deptId":"D019101","deptName":"华北销售中心"}],[{"deptId":"D019","deptName":"销售部"},{"deptId":"D019101","deptName":"华北销售中心"}],[{"deptId":"D083","deptName":"音乐事业部"}],[{"deptId":"D027","deptName":"杭州研究院"},{"deptId":"D027048","deptName":"技术工程事业部"},{"deptId":"D027048002","deptName":"项目管理与效能中心"}],[{"deptId":"D027","deptName":"杭州研究院"},{"deptId":"D027048","deptName":"技术工程事业部"}],[{"deptId":"D027","deptName":"杭州研究院"},{"deptId":"D027048","deptName":"技术工程事业部"}]]';
    const arr = JSON.parse(str).flat(); //扁平化

    let newArr = [];
    noRepeat(arr).length && noRepeat(arr).forEach(it => {
      appendChild(it, newArr);
    });
  }, [])

  const noRepeat = (arr) => { //去重
    let newobj = {}; 
    return arr.reduce((preVal, curVal) => {
    newobj[curVal.deptId] ? '' : newobj[curVal.deptId] = preVal.push(curVal); 
      return preVal 
    }, []);
  }

  const appendChild = (item, newArr) => {
    if(!newArr.find(it => item.deptId.indexOf(it.deptId) > -1)) { //所有一级部门
      newArr.push({
        deptId: item.deptId,
        deptName: item.deptName,
        children: [],
      });
      setTreeData(newArr);
    }else {
      appendOtherChild(item, newArr);
    }
  }

  const appendOtherChild = (item, newArr) => {
    newArr.map(it => {
      if(item.deptId.indexOf(it.deptId) > -1 && item.deptId.length === it.deptId.length+3) {
        it.children.push({
          deptId: item.deptId,
          deptName: item.deptName,
          children: [],
        })
      }else {
        appendOtherChild(item, it.children);
      }
    });
    setTreeData(newArr);
  }

总结

可能这些数据和你的不太一样,但是逻辑可能八九不离十,可以好好看一下这几十行代码

到此这篇关于如何将JavaScript将数组转为树形结构的文章就介绍到这了,更多相关JavaScript数组转为树形结构内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 写类方式之一
Jul 05 Javascript
js window.onload 加载多个函数的方法
Nov 02 Javascript
Jquery 1.42 checkbox 全选和反选代码
Mar 27 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 Javascript
在HTML代码中使用JavaScript代码的例子
Oct 16 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
vue router-link传参以及参数的使用实例
Nov 10 Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
Oct 23 Javascript
小程序新版订阅消息模板消息
Dec 31 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
Jan 18 Javascript
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
关于antd tree 和父子组件之间的传值问题(react 总结)
使用react+redux实现计数器功能及遇到问题
微信小程序基础教程之echart的使用
vue实现水波涟漪效果的点击反馈指令
vue 实现上传组件
May 31 #Vue.js
vue基于Teleport实现Modal组件
Vue+Element UI实现概要小弹窗的全过程
You might like
php mysql索引问题
2008/06/07 PHP
PHP教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
使用URL传输SESSION信息
2015/07/14 PHP
php函数连续调用实例分析
2015/07/30 PHP
浅析Yii2集成富文本编辑器redactor实例教程
2016/04/25 PHP
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
PHP利用超级全局变量$_POST来接收表单数据的实例
2016/11/05 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
浅谈Javascript鼠标和滚轮事件
2012/06/27 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
js string 转 int 注意的问题小结
2013/08/15 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
2015/08/07 Javascript
使用jQuery获取data-的自定义属性
2015/11/10 Javascript
jQuery实现获取绑定自定义事件元素的方法
2015/12/02 Javascript
jQuery实现TAB选项卡切换特效简单演示
2016/03/04 Javascript
js老生常谈之this,constructor ,prototype全面解析
2016/04/05 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
详解Vue 方法与事件处理器
2017/06/20 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
[02:47]DOTA2英雄基础教程 野性怒吼兽王
2013/12/05 DOTA
[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访 神秘商人痛陈生计不易
2018/04/05 DOTA
Python转码问题的解决方法
2008/10/07 Python
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
python中多个装饰器的执行顺序详解
2018/10/08 Python
pyqt5 键盘监听按下enter 就登陆的实例
2019/06/25 Python
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
融资租赁计划书
2014/04/29 职场文书
大专生自荐书范文
2014/06/22 职场文书
新闻学专业职业生涯规划范文:我的人生我做主
2014/09/12 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
领导欢迎词致辞
2015/01/23 职场文书
2015年安全生产责任书
2015/01/30 职场文书
Python关于OS文件目录处理的实例分享
2021/05/23 Python