JavaScript如何遍历无限嵌套树结构获取指定id对应的子节点数据

首先明确数据特殊点：该结构的child字段为JSON序列化字符串，不是直接可用的数组，遍历前需要先做解析处理。

可选实现方案 #

1. 递归实现（代码简洁，适合绝大多数常规场景） #

核心逻辑：逐层遍历节点，当前节点匹配ID直接返回，不匹配就解析子节点递归查找，找到结果立刻向上返回。

function findMenuNode(menuList, targetId) {
  for (const node of menuList) {
    // 命中当前节点，返回时顺便把child解析为数组方便后续使用
    if (node.id === targetId) {
      return {
        ...node,
        child: JSON.parse(node.child || '[]')
      }
    }
    // 解析子节点列表
    const childNodes = JSON.parse(node.child || '[]')
    if (childNodes.length) {
      const hit = findMenuNode(childNodes, targetId)
      // 子节点中命中直接返回
      if (hit) return hit
    }
  }
  // 全量遍历无匹配返回null
  return null
}

// 调用方式
const matchedNode = findMenuNode(menu, '传入需要查找的id')

2. 非递归栈实现（适合菜单层级极深的场景，避免递归栈溢出） #

核心逻辑：用栈手动维护待遍历的节点队列，循环取出节点比对，子节点持续入栈直到遍历完全量节点。

function findMenuNodeIterative(menuList, targetId) {
  const stack = [...menuList]
  while (stack.length) {
    const node = stack.pop()
    if (node.id === targetId) {
      return {
        ...node,
        child: JSON.parse(node.child || '[]')
      }
    }
    const childNodes = JSON.parse(node.child || '[]')
    // 倒序压栈保证遍历顺序和递归一致
    for (let i = childNodes.length - 1; i >= 0; i--) {
      stack.push(childNodes[i])
    }
  }
  return null
}

容错优化 #

如果接口返回的child字段可能存在非法JSON格式，给解析逻辑加错误捕获，避免页面崩溃：

function parseChild(childStr) {
  try {
    return JSON.parse(childStr || '[]')
  } catch (e) {
    console.error('子菜单数据解析异常', e)
    return []
  }
}

把上述两段实现代码里的JSON.parse替换成调用这个方法即可。

提示：常规后台管理系统的菜单层级一般不会超过10层，递归实现完全够用，只有超大型组织架构、无限级分类这类可能出现上百层嵌套的场景，才需要优先用非递归实现。

内容的提问来源于stack exchange，提问作者Faiyaz Siddique