如何将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 相关文章推荐
js有序数组的连接问题
Oct 01 Javascript
jQuery学习之prop和attr的区别示例介绍
Nov 15 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 Javascript
浅谈JavaScript异常处理语句
Jun 26 Javascript
基于Vuejs实现购物车功能
Aug 02 Javascript
JavaScript中ES6字符串扩展方法
Aug 26 Javascript
vue中mint-ui环境搭建详细介绍
Apr 06 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
js中的闭包学习心得
Feb 06 Javascript
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
解决vue 绑定对象内点击事件失效问题
Sep 05 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
关于antd tree 和父子组件之间的传值问题(react 总结)
使用react+redux实现计数器功能及遇到问题
微信小程序基础教程之echart的使用
vue实现水波涟漪效果的点击反馈指令
vue 实现上传组件
May 31 #Vue.js
vue基于Teleport实现Modal组件
Vue+Element UI实现概要小弹窗的全过程
You might like
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
学习JavaScript的最佳方法分享
2011/10/21 Javascript
JQuery1.6 使用方法三
2011/11/23 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
2014/01/07 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
jquery.cookie.js使用指南
2015/01/05 Javascript
kindeditor修复会替换script内容的问题
2015/04/03 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
javascript中this的四种用法
2015/05/11 Javascript
JS实现弹性漂浮效果的广告代码
2015/09/02 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
2015/11/24 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
vue swipe自定义组件实现轮播效果
2019/07/03 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
python开发简易版在线音乐播放器
2017/03/03 Python
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
python实现对输入的密文加密
2019/03/20 Python
python对csv文件追加写入列的方法
2019/08/01 Python
详解django实现自定义manage命令的扩展
2019/08/13 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
python求解汉诺塔游戏
2020/07/09 Python
皮尔·卡丹巴西官方商店:Pierre Cardin
2017/07/21 全球购物
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
旅游管理实习自我鉴定
2013/09/29 职场文书
车间统计员岗位职责
2015/04/14 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
赡养老人协议书范本
2015/08/06 职场文书
90条交通安全宣传标语
2019/10/12 职场文书