如何将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);
  }

总结

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