ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript で階層データのフラット配列をネストされたツリー構造に効率的に変換するにはどうすればよいですか?

JavaScript で階層データのフラット配列をネストされたツリー構造に効率的に変換するにはどうすればよいですか?

Barbara Streisand
Barbara Streisandオリジナル
2024-12-19 22:30:11579ブラウズ

How Can I Efficiently Convert a Flat Array of Hierarchical Data into a Nested Tree Structure in JavaScript?

JavaScript でフラット配列データからツリー構造を構築する

複雑な階層データを扱う場合、データをツリーに編成する必要があります。分析とプレゼンテーションのための構造のようなものです。この場合、順序付けされた JSON ファイルには、ID、parentId、レベル、テキストを持つ各エントリのデータが含まれます。タスクは、このフラットなデータ構造をネストされた階層に変換することです。

この変換を効率的に達成するには、マップ検索戦略を活用することが重要です。これには、各 ID をリスト内のそのインデックスにマップするマップの作成が含まれます。このマップを利用すると、ネストされた階層を 1 回のパスで構築でき、複数のループが不要になります。

次の JavaScript 関数は、ツリー構造を構築するためのマップ検索アプローチを示しています。

function list_to_tree(list) {
  var map = {}, node, roots = [], i;
  
  for (i = 0; i < list.length; i += 1) {
    map[list[i].id] = i; // initialize the map
    list[i].children = []; // initialize the children
  }
  
  for (i = 0; i < list.length; i += 1) {
    node = list[i];
    if (node.parentId !== "0") {
      // if you have dangling branches check that map[node.parentId] exists
      list[map[node.parentId]].children.push(node);
    } else {
      roots.push(node);
    }
  }
  return roots;
}

親に素早くアクセスするためのマップを作成し、各ノードの子リストを初期化することにより、関数は両方の for ループを効率的にマージできます。このアプローチは複数のルートをサポートしており、簡単な変更で未解決のブランチを処理したり無視したりできます。

関数の機能をデモンストレーションするには、次の入力を使用して実行できます。

var entries = [{
    "id": "12",
    "parentId": "0",
    "text": "Man",
    "level": "1",
    "children": null
  },
  {
    "id": "6",
    "parentId": "12",
    "text": "Boy",
    "level": "2",
    "children": null
  },
  {
    "id": "7",
    "parentId": "12",
    "text": "Other",
    "level": "2",
    "children": null
  },
  {
    "id": "9",
    "parentId": "0",
    "text": "Woman",
    "level": "1",
    "children": null
  },
  {
    "id": "11",
    "parentId": "9",
    "text": "Girl",
    "level": "2",
    "children": null
  }
];

console.log(list_to_tree(entries));

これにより、ノード間の予想される関係を含む階層ツリー構造を出力します。このアプローチは、マップ ルックアップ戦略を活用することで、フラットな階層データを適切に構造化されたツリー配列に変換するための効率的かつ柔軟なソリューションを提供します。

以上がJavaScript で階層データのフラット配列をネストされたツリー構造に効率的に変換するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。