JavaScript でフラット配列から階層ツリー構造を効率的に構築する方法

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

はじめに

JavaScript では、階層データを操作します。ツリー構造やナビゲーション メニューの作成など、さまざまなアプリケーションに不可欠です。データがフラット配列に格納されている場合、データの操作と視覚化を容易にするためにデータを階層構造に変換する必要があります。この記事では、JavaScript でフラット配列からツリー配列を構築する効果的な方法を説明します。

問題

次のプロパティを持つオブジェクトで構成される複雑な JSON ファイルがあるとします。 :

• id: 一意の識別子
• parentId: 親の IDノード (ルート ノードの場合は 0)
• レベル: ツリー内のノードの深さ

このタスクは、フラットな JSON 構造を、ネストされたオブジェクトを表す階層ツリー構造に変換することです。親子関係。

ソリューション

ソリューションは次のことを活用します。階層ツリー構造を効率的に構築するためのマップ検索アプローチ。アルゴリズムには 2 つのステップが含まれます:

1. オブジェクトにインデックスを付けるマップの作成:

   • フラット配列を反復処理し、次のマップを作成します。キーは id プロパティで、値は対応する配列です。

2. ツリー構造を構築します:

   • フラット配列を再度反復処理します:

     • 各オブジェクトについて、マップからその親のインデックスを取得します。 parentId.
     • 親が存在する (ルートではない) 場合、現在のオブジェクトを子としてその親に追加します。
     • 親が存在しない場合、それはルート ノードであるため追加する必要があります。ルートノードへarray.

例

次のフラットな JSON 配列を考えてみましょう:

const 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
}];

上記のアルゴリズムをこのフラット配列に適用すると、次の階層ツリーが出力されます構造:

const result = [
{
  "id": "12",
  "parentId": "0",
  "text": "Man",
  "level": "1",
  "children": [
    {
      "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":
  {
    "id": "11",
    "parentId": "9",
    "text": "Girl",
    "level": "2",
    "children": null
  }
}
];

結論

提示されたアルゴリズムは、階層データのフラット配列を JavaScript で構造化ツリー配列に変換する効率的な方法を提供します。このアプローチでは、マップ ルックアップを利用してプロセスを最適化し、複数のルート ノードをサポートします。これは、さらなる操作や視覚化のために複雑なデータからツリー構造を作成する必要がある状況に最適です。

以上がJavaScript でフラット配列から階層ツリー構造を効率的に構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。