JavaScript递归forEach循环无法退出？树形节点ID查找函数问题

我懂你遇到的痛点——用forEach遍历子节点做递归查找时，就算找到了目标节点，要么没法立刻停止循环，要么递归的结果没法正确传递回上层函数，导致最终拿不到想要的节点对吧？

先看你的Node类，这个定义是没问题的，我稍微给childNodes加了个默认空数组，避免不传子节点时出现问题：

class Node {
  constructor(name, childNodes = [], id) {
    this.name = name;
    this.childNodes = childNodes;
    this.id = id;
  }
}

问题根源：forEach的局限性 #

你之前用forEach的问题在于两点：

1. forEach的回调函数里的return只能终止当前回调，不会让外层的getNodeById函数返回结果，递归找到的节点会直接丢失；
2. forEach本身不支持中途终止循环（除非抛出异常，这显然不是优雅的做法），就算找到了目标，还是会遍历完所有子节点。

解决方案1：用for...of循环（最直观可控） #

换成for...of遍历子节点，这样一旦递归找到目标，就能立刻通过return终止循环并把结果向上传递：

function getNodeById(currentNode, id) {
  // 先检查当前节点是否匹配
  if (currentNode.id === id) {
    console.log("found");
    return currentNode;
  }

  // 遍历每个子节点，递归查找
  for (const child of currentNode.childNodes) {
    const foundNode = getNodeById(child, id);
    // 如果找到节点，立刻返回，终止后续遍历
    if (foundNode) {
      return foundNode;
    }
  }

  // 遍历完所有节点都没找到，返回undefined
  return undefined;
}

解决方案2：用Array.find简化代码 #

如果你喜欢更简洁的写法，可以用数组的find方法，它会遍历子节点，直到找到第一个返回真值的结果（也就是我们递归找到的节点）：

function getNodeById(currentNode, id) {
  if (currentNode.id === id) {
    console.log("found");
    return currentNode;
  }
  // 用find遍历子节点，递归查找，找到后直接返回
  return currentNode.childNodes.find(child => getNodeById(child, id));
}

测试示例 #

我们来验证一下效果：

// 构建测试树
const tree = new Node(
  "Root",
  [
    new Node("Child 1", [new Node("Grandchild 1.1", [], 11)], 1),
    new Node("Child 2", [], 2),
    new Node("Child 3", [new Node("Grandchild 3.1", [], 31), new Node("Grandchild 3.2", [], 32)], 3)
  ],
  0
);

console.log(getNodeById(tree, 31)); // 输出: Node { name: 'Grandchild 3.1', childNodes: [], id: 31 }

这样就能正确找到并返回目标节点了，而且找到后会立刻终止遍历，不会做无用功。

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