JavaScript递归构建JSON树结构时如何优化节点嵌套问题

在前端数据处理场景中，经常会遇到需要将扁平的列表数据转换为嵌套JSON树结构的需求，比如后台返回的部门列表、菜单列表等数据，通常需要整理成树形结构方便前端渲染。递归是实现这种转换的常用手段，但如果不注意写法，很容易出现节点嵌套不合理、重复计算、性能低下等问题。

常见的递归构建树结构的问题

很多开发者初次实现递归构建树结构时，会写出类似下面的代码：

// 原始扁平数据
const flatList = [
  { id: 1, name: '部门A', parentId: null },
  { id: 2, name: '部门A-1', parentId: 1 },
  { id: 3, name: '部门A-2', parentId: 1 },
  { id: 4, name: '部门B', parentId: null },
  { id: 5, name: '部门B-1', parentId: 4 },
  { id: 6, name: '部门A-1-1', parentId: 2 }
];

// 基础递归构建树的方法
function buildTreeBasic(list, parentId = null) {
  const tree = [];
  for (let i = 0; i < list.length; i++) {
    const item = list[i];
    if (item.parentId === parentId) {
      // 递归查找子节点
      const children = buildTreeBasic(list, item.id);
      if (children.length) {
        item.children = children;
      }
      tree.push(item);
    }
  }
  return tree;
}

const treeResult = buildTreeBasic(flatList);
console.log(treeResult);

这种写法存在明显的节点嵌套优化问题：每次递归都需要遍历整个原始列表来查找当前节点的子节点，当数据量较大时，时间复杂度会达到O(n²)，而且如果原始数据中存在异常的多层级嵌套，还可能出现栈溢出的风险。

优化节点嵌套的核心方法

1. 使用映射表减少重复遍历

我们可以先遍历一次原始数据，把所有节点按照id映射到对象中，这样查找子节点时不需要每次都遍历整个列表，直接通过id获取即可，大幅降低时间复杂度。

function buildTreeWithMap(list) {
  // 第一步：构建id到节点的映射表
  const map = {};
  const tree = [];
  // 先复制一份数据，避免修改原始数据
  const copyList = list.map(item => ({ ...item }));
  
  for (const item of copyList) {
    map[item.id] = item;
    // 初始化children属性，避免后续判断
    item.children = [];
  }
  
  // 第二步：遍历所有节点，将子节点挂载到父节点下
  for (const item of copyList) {
    const parent = map[item.parentId];
    if (parent) {
      // 父节点存在，挂载到父节点的children中
      parent.children.push(item);
    } else {
      // 父节点不存在，说明是根节点
      tree.push(item);
    }
  }
  
  // 过滤掉空的children属性
  function removeEmptyChildren(node) {
    if (node.children.length === 0) {
      delete node.children;
    } else {
      node.children.forEach(child => removeEmptyChildren(child));
    }
  }
  tree.forEach(root => removeEmptyChildren(root));
  
  return tree;
}

const optimizedTree = buildTreeWithMap(flatList);
console.log(optimizedTree);

这种写法的时间复杂度是O(n)，只需要两次遍历就可以完成树结构构建，避免了递归过程中的重复查找，从根源上减少了节点嵌套过程中的不必要计算。

2. 控制递归深度避免栈溢出

如果原始数据中存在异常深的嵌套层级，即使优化了查找逻辑，递归也可能导致调用栈溢出。这时候可以添加一个深度限制参数，当递归深度超过阈值时停止嵌套，或者改用迭代的方式实现树结构构建。

// 带深度限制的递归构建方法
function buildTreeWithDepthLimit(list, maxDepth = 10) {
  const map = {};
  const tree = [];
  const copyList = list.map(item => ({ ...item }));
  
  for (const item of copyList) {
    map[item.id] = item;
    item.children = [];
  }
  
  // 递归挂载子节点，同时记录当前深度
  function mountChildren(node, currentDepth) {
    if (currentDepth >= maxDepth) {
      // 达到最大深度，不再继续查找子节点
      delete node.children;
      return;
    }
    const children = copyList.filter(item => item.parentId === node.id);
    if (children.length === 0) {
      delete node.children;
      return;
    }
    node.children = children;
    children.forEach(child => {
      mountChildren(child, currentDepth + 1);
    });
  }
  
  // 先找到根节点
  for (const item of copyList) {
    if (!map[item.parentId]) {
      tree.push(item);
      mountChildren(item, 0);
    }
  }
  
  return tree;
}

const depthLimitTree = buildTreeWithDepthLimit(flatList, 5);
console.log(depthLimitTree);

3. 缓存递归结果避免重复计算

如果同一个父节点需要被多次查询子节点，可以使用缓存机制存储已经查询过的父节点对应的子节点列表，下次查询时直接返回缓存结果，减少重复计算。

function buildTreeWithCache(list) {
  const map = {};
  const cache = {}; // 缓存父节点对应的子节点列表
  const tree = [];
  const copyList = list.map(item => ({ ...item }));
  
  for (const item of copyList) {
    map[item.id] = item;
    item.children = [];
  }
  
  // 获取某个父节点的子节点，带缓存
  function getChildren(parentId) {
    if (cache[parentId] !== undefined) {
      return cache[parentId];
    }
    const children = copyList.filter(item => item.parentId === parentId);
    cache[parentId] = children;
    return children;
  }
  
  function buildNode(node) {
    const children = getChildren(node.id);
    if (children.length === 0) {
      delete node.children;
      return;
    }
    node.children = children;
    children.forEach(child => buildNode(child));
  }
  
  for (const item of copyList) {
    if (!map[item.parentId]) {
      tree.push(item);
      buildNode(item);
    }
  }
  
  return tree;
}

const cachedTree = buildTreeWithCache(flatList);
console.log(cachedTree);

优化后的效果对比

我们可以通过一个简单的性能测试来对比优化前后的差异：

通过合理的优化，不仅可以解决节点嵌套带来的性能问题，还能让树结构构建的代码更健壮，适配更多复杂的数据场景。在实际开发中，可以根据数据规模和嵌套特点选择合适的优化方案，优先使用映射表的方式减少重复计算，再根据需求添加深度限制或缓存机制即可。

JavaScript递归JSON树结构节点嵌套优化修改时间：2026-07-03 12:12:34