使用JavaScript怎么将数组转为树形结构

本篇文章给大家分享的是有关使用javascript怎么将数组转为树形结构，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

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怎么将数组转为树形结构，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网精选频道。