如何将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将数组转为树形结构的文章就介绍至此，更多相关JavaScript数组转为树形结构内容请搜索编程宝库以前的文章，希望以后支持编程宝库！

 1.使用场景有这么一个需求，开发了一套系统，当用户离开桌面或者一段时间不操作的话，需要把该系统所有打开页面锁定起来，就跟桌面锁屏一样，只能输入密码验证成功后，或者重新登录，才可以继续操作页面，如果刷新页面， ...