如何将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 相关文章推荐
来自qq的javascript面试题
Jul 24 Javascript
给文字加上着重号的JS代码
Nov 12 Javascript
js获取当月最后一天实例代码
Nov 19 Javascript
node.js中的fs.lchown方法使用说明
Dec 16 Javascript
JavaScript操作Cookie方法实例分析
May 27 Javascript
谈谈AngularJs中的隐藏和显示
Dec 09 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
Dec 08 Javascript
JS中Array数组学习总结
Jan 18 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
Jun 15 Javascript
vue插件实现v-model功能
Sep 10 Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 Javascript
Vue路由管理器Vue-router的使用方法详解
Feb 05 Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
使用react+redux实现计数器功能及遇到问题
微信小程序基础教程之echart的使用
vue实现水波涟漪效果的点击反馈指令
vue 实现上传组件
May 31 #Vue.js
vue基于Teleport实现Modal组件
Vue+Element UI实现概要小弹窗的全过程
You might like
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
详解php中curl返回false的解决办法
2019/03/18 PHP
Javascript实现视频轮播在pc端与移动端均可
2013/09/29 Javascript
jQuery DOM操作实例
2014/03/05 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
2017/07/07 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
2019/03/06 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python素数检测的方法
2015/05/11 Python
python实现比较两段文本不同之处的方法
2015/05/30 Python
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
Python 性能优化技巧总结
2016/11/01 Python
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
Django如何使用第三方服务发送电子邮件
2019/08/14 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
python操作gitlab API过程解析
2019/12/27 Python
python实现单机五子棋
2020/08/28 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
大班亲子运动会方案
2014/06/10 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
Log4j.properties配置及其使用
2021/08/02 Java/Android