如何在树形结构中根据指定节点ID添加子节点？

嘿，这个问题其实挺典型的，处理树形结构的核心就是找到目标节点，然后给它的children数组添加新节点就行。我给你两种常见的实现思路，你可以根据自己的场景选择：

方法一：递归遍历（直观易写） #

递归是处理树形结构最直观的方式，我们可以写一个递归函数，遍历每个节点，找到匹配ID的节点后就添加子节点：

interface Node {
  id: number;
  name: string;
  children?: Node[];
}

const NODE_DATA: Node[] = [
  { id: 1, name: 'A' },
  { id: 2, name: 'B', children: [
    { id: 3, name: 'C' },
    { id: 4, name: 'D' },
    { id: 5, name: 'E', children: [{ id: 6, name: 'F' }] }
  ] }
];

function addNodeToParent(tree: Node[], targetId: number, newNode: Node): boolean {
  // 遍历每一个根节点
  for (const node of tree) {
    if (node.id === targetId) {
      // 先确保children存在，避免undefined报错
      if (!node.children) {
        node.children = [];
      }
      node.children.push(newNode);
      return true; // 找到目标并添加成功，返回true
    }
    // 如果当前节点有子节点，递归遍历子节点
    if (node.children && addNodeToParent(node.children, targetId, newNode)) {
      return true;
    }
  }
  return false; // 没找到目标节点，返回false
}

// 示例调用：给id为5的节点添加{id:7, name:'G'}
addNodeToParent(NODE_DATA, 5, { id:7, name:'G' });

这个函数的逻辑很清晰：从根节点开始逐个检查，匹配到目标ID就添加子节点；如果当前节点有子节点，就递归深入子节点继续查找，找到后就返回true，避免不必要的遍历。

方法二：迭代遍历（适合层级极深的树） #

如果你的树层级特别深，递归可能会触发栈溢出，这时候可以用迭代的方式（比如广度优先遍历BFS）来处理：

function addNodeToParentIterative(tree: Node[], targetId: number, newNode: Node): boolean {
  // 用队列存储待遍历的节点
  const queue: Node[] = [...tree];

  while (queue.length > 0) {
    const currentNode = queue.shift()!; // 取出队列第一个节点

    if (currentNode.id === targetId) {
      if (!currentNode.children) {
        currentNode.children = [];
      }
      currentNode.children.push(newNode);
      return true;
    }

    // 如果有子节点，全部加入队列继续遍历
    if (currentNode.children) {
      queue.push(...currentNode.children);
    }
  }
  return false;
}

// 示例调用
addNodeToParentIterative(NODE_DATA, 2, { id:7, name:'G' });

这种方法用队列来管理待遍历的节点，一层一层往下找，不会有递归栈溢出的问题，适合处理大型树形结构。

小提示 #

• 两个函数都返回了boolean值，你可以根据返回结果判断是否成功添加了节点（比如目标ID不存在的情况）
• 记得先判断children是否存在，如果原节点没有children属性，要先初始化一个空数组再push新节点，避免报错

备注：内容来源于stack exchange，提问作者Benjamin