JavaScript 数组转树形结构：扁平数据递归构建实战

作者：纸飞机时间：2026-10-24 11:51:34浏览：458

本文介绍如何在 JavaScript 中将后台返回的扁平数组转换为前端所需的树形结构。通过 React Hooks 环境下的实际案例，展示了利用递归逻辑处理父子节点关系的方法。代码包含状态管理与 useEffect 钩子，适用于部门层级等无重复数据的场景，帮助开发者快速实现数据结构的转换。

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