根據id遞回獲取樹段

我正在嘗試根據 id 獲取樹段。id 可能位于根目錄中，也可能位于子項中的任何位置。我的目標是獲得整個家譜線，而不是其他不相關的資料。

我有整個資料樹和一個 id。

這個想法是遞回地進行，因為孩子的數量是未知的。

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) => {
    //** goes top to bottom

    const recursiveChildCheck = (folder, id) => {
      // THIS trial failed
      // let foundNested = false;
      // if (folder.id === id) {
      //   return true;
      // }
      // function recurse(folder) {
      //   if (!folder.hasOwnProperty("children") || folder.children.length === 0)
      //     return;
      //   for (var i = 0; i < folder.children.length; i  ) {
      //     if (folder.children[i].id === id) {
      //       foundNested = true;
      //       break;
      //     } else {
      //       if (folder.children[i].children.length > 0) {
      //         recurse(folder.children[i].children);
      //         if (foundNested) {
      //           break;
      //         }
      //       }
      //     }
      //   }
      // }
      // recurse(folder);
      // return foundNested;

      const aChildHasIt =
        folder.children.length > 0 && folder.children.some((f) => f.id === id);
      if (aChildHasIt) return true;

      let nestedChildHasIt = false;
      /** The problem seems to be here */
      folder.children.forEach((childFolder) => {
        // Is using a forEach loop the correct way?
        // ideally it seems there is a simple way to do a recursive .some on the dhildren...
        childFolder.children.length>0 && recursiveChildCheck(childFolder, id)
      });
      if (nestedChildHasIt) return true;
      folder.children && folder.children.forEach(recursiveChildCheck);
    };

    const treeSegment = folders.reduce((result = [], folder) => {
      if (
        folder.id === selectedFolderId ||
        recursiveChildCheck(folder, selectedFolderId)
      ) {
        result.push(folder);
      }

      return result;
    }, []);

    return treeSegment;
  };

  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"); // this fails
  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>
      {/* <h2>{JSON.stringify(result)}</h2> */}
    </div>
  );
}

uj5u.com熱心網友回復：

一些問題：

• recursiveChildCheck應該回傳一個布林值，但在某些情況下不undefined回傳任何 ( )，因為return以下運算式中缺少陳述句：

  folder.children && folder.children.forEach(recursiveChildCheck);
  

• 而且，在上面的運算式中，運算&&符的第二個運算元永遠不會被計算，因為folder.children是一個陣列，并且陣列總是真值，即使是空陣列。為了給第二個運算元一個機會，第一個運算元應該是folder.children.length > 0

• 但即使進行了修正，第二個運算元也將始終評估為undefined，因為這是.forEach設計回傳的結果。您應該在那里有一個回傳布林值的方法呼叫，例如some.

• nestedChildHasIt初始化后永遠不會獲得任何其他值，因此return true永遠不會發生以下情況：

  if (nestedChildHasIt) return true;
  

  您可能打算nestedChildHasIt在前面的forEach回圈中設定為 true ，但似乎您在這里有一種替代方法可以執行與最后的另一個forEach回圈相同的操作。

我認為您一直在努力解決的問題是您需要檢查布爾條件（子樹是否有id？），并且您需要將子項過濾為正確的子項，創建一個具有此的新節點獨一無二的孩子。

更正的代碼：

function getForestSegment(nodes, id) {
    function recur(nodes) {
        for (const node of nodes) {
            if (node.id === id) return [node];
            const children = recur(node.children);
            if (children.length) return [{ ...node, children}];
        }
        return [];
    }
    return recur(nodes);
}

// Example from question:
const forest = [{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: []}]}];

for (const id of ["2-1", "2-2", "2-4", "2-3", "3-1", "1-1", "1-2"]) {
    console.log(id);
    console.log(getForestSegment(forest, id));
}

標籤：javascript 递归 树

上一篇：為什么在遞回的if條件失敗后控制元件不回傳主函式？

下一篇：Python函式遞回-給出“串列”中“數字”第一次出現的索引，如果數字不在串列中，則回傳None