Mandy's Web

文章導覽

  • Tree Data

  • 找出 ID 裡的資訊

  • 找出 ID 的根目錄

  • 列出 ID 的路徑


樹狀結構的各種處理 (Tree Data Structure)

最近為了處理 tree 的樹狀結構多了好幾根白頭髮,囧~~~

Tree Data

這是一筆 tree (樹) 的資料

const data = [
  {
    id: "1",
    children: [
      {
        id: "1-1",
        children: [
          {
            id: "1-1-1",
            children: [],
          },
          {
            id: "1-1-2",
            children: [],
          },
        ],
      },
      {
        id: "1-2",
        children: [],
      },
    ],
  },
  {
    id: "2",
    children: [
      {
        id: "2-1",
        children: [],
      },
    ],
  },
  {
    id: "3",
    children: [
      {
        id: "3-1",
        children: [],
      },
      {
        id: "3-2",
        children: [
          {
            id: "3-2-1",
            children: [],
          },
          {
            id: "3-2-2",
            children: [],
          },
        ],
      },
      {
        id: "3-3",
        children: [],
      },
    ],
  },
  {
    id: "4",
    children: [
      {
        id: "4-1",
        children: [],
      },
    ],
  },
];

找出 ID 裡的資訊

const findNode = function (cond, root = []) {
  for (const node of root) {
    if (cond(node) || findNode(cond, node.children)) {
      return cond(node) ? node : findNode(cond, node.children);
    }
  }
  return null;
};

console.log(
  "node",
  findNode((node) => node.id === "3-2-1", data)
);

找出 ID 的根目錄

const findRoot = function (cond, root = []) {
  for (const node of root) {
    if (cond(node) || findNode(cond, node.children)) {
      return node;
    }
  }
  return null;
};

console.log(
  "root",
  findRoot((node) => node.id === "3-2-1", data)
);

列出 ID 的路徑

const findPath = function (cond, root = [], data = [root]) {
  for (const node of root) {
    if (cond(node)) {
      return data;
    }
    const path = findPath(cond, node.children, [...data, node.children]);
    if (!!path) {
      return path;
    }
  }
  return null;
};

console.log(
  "root",
  findPath((node) => node.id === "3-2-1", data)
);

參考資料: The Tree data structure


對這篇文章有什麼想法嗎?

Copyright © 2022 Mandy. All rights reserved. Build with Angular