JavaScript将数组转为树形结构

Posted 2022-11-11 兰村_frontend

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);
  

总结

可能这些数据和你的不太一样，但是逻辑可能八九不离十，可以好好看一下这几十行代码，如果能学到一丁丁小东西，如果你正好也登录着，还希望给点个小赞赞哈！