JavaScript如何递归根据ID提取树形结构的对应关联分支

核心问题点 #

• 递归调用返回值未接收：你在forEach中调用recursiveChildCheck时没有将返回的布尔值赋值给nestedChildHasIt，导致该变量永远为false，深层节点匹配结果无法向上传递
• 递归遍历效率低且无提前终止：forEach无法中途中断遍历，即使已经找到匹配节点也会遍历完所有子节点，性能差且没有利用递归返回结果
• 子节点未过滤：原有逻辑仅判断根节点是否包含目标节点，返回的根节点下仍会携带所有子分支，不符合「仅返回家族链路、无无关数据」的需求

修复后完整代码 #

import "./styles.css";

export default function App() {
  const folderTree = [
    {
      id: "1-1",
      children: [
        {
          id: "1-2",
          parentId: "1-1",
          children: []
        }
      ]
    },
    {
      id: "2-1",
      children: [
        {
          id: "2-2",
          parentId: "2-1",
          children: [
            {
              id: "2-4",
              parentId: "2-2",
              children: []
            }
          ]
        },
        {
          id: "2-3",
          parentId: "2-1",
          children: []
        }
      ]
    }
  ];

  const getRelatedTreeFolders = (folders, selectedFolderId) => {
    // 递归查找匹配节点并构建纯净链路
    const buildPathTree = (node) => {
      // 当前节点就是目标，直接返回
      if (node.id === selectedFolderId) {
        return {...node};
      }
      // 遍历子节点递归查找
      if (node.children?.length) {
        const matchedChildren = node.children.map(buildPathTree).filter(Boolean);
        if (matchedChildren.length) {
          // 只保留匹配到目标的子分支，过滤无关兄弟
          return {...node, children: matchedChildren};
        }
      }
      return null;
    };

    return folders.map(buildPathTree).filter(Boolean);
  };

  const selectedFolderId = "2-1";
  const selectedFolderId1 = "2-2";
  const selectedFolderId2 = "2-4";
  const selectedFolderId3 = "2-3";
  const selectedFolderId4 = "3-1";
  const selectedFolderId5 = "1-1";
  const selectedFolderId6 = "1-2";

  console.log("parent");
  console.log(getRelatedTreeFolders(folderTree, selectedFolderId));
  console.log("child");
  console.log(getRelatedTreeFolders(folderTree, selectedFolderId1));
  console.log("grandchild"); 
  console.log(getRelatedTreeFolders(folderTree, selectedFolderId2));
  console.log("sibling");
  console.log(getRelatedTreeFolders(folderTree, selectedFolderId3));
  console.log("not found");
  console.log(getRelatedTreeFolders(folderTree, selectedFolderId4));
  console.log("other parent");
  console.log(getRelatedTreeFolders(folderTree, selectedFolderId5));
  console.log("other child");
  console.log(getRelatedTreeFolders(folderTree, selectedFolderId6));

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
    </div>
  );
}

效果说明 #

修复后所有测试用例均正常返回，比如查询孙节点2-4时，仅返回2-1 -> 2-2 -> 2-4的链路，不会携带无关的2-3节点，完全符合需求。

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