JavaScript で JSON オブジェクトのフラット配列を階層ツリー構造に効率的に変換する方法

JavaScript でフラット配列を階層ツリー構造に変換する

JavaScript では、データを階層的に編成する必要がある状況によく遭遇します。一般的な表現の 1 つはツリー構造であり、ノードが親子関係で相互接続されます。この記事では、JSON オブジェクトのフラット配列をそのような階層ツリー構造に変換する効率的な手法について説明します。

問題の説明

それぞれがツリー内のノードを表す JSON オブジェクトの配列が与えられたとします。 「id」、「parentId」、「level」、「text」などのプロパティを使用して、このフラット配列を、各ノードにその配列が含まれるネストされた JSON オブジェクトに変換することを目的としています。

解決策

効果的なアプローチの 1 つは、マップ検索アルゴリズムの利用です。各ノードの「id」を配列内の対応するインデックスに関連付けるマップを作成することで、配列を効率的に走査して階層構造を構築できます。

まず、マップを初期化し、各ノードに子孫を格納するための空の「子」配列。次に、配列を反復処理し、各ノードの「parentId」を確認します。 「0」でない場合は、マップからの「id」を使用して親ノードを見つけ、現在のノードを子として追加します。 「parentId」が「0」のノードはツリーのルートを表します。

このソリューションの主な利点は、その効率性と複数のルートを処理できることです。外部ライブラリに依存せず、未解決のブランチ (親のない子ノード) を処理できます。

このソリューションを実装する 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;
}

提供されたサンプル入力の使用を使用すると、以下の例に示すように、この関数は期待される階層出力を生成します。

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 で JSON オブジェクトのフラット配列を階層ツリー構造に効率的に変換する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。