ホームページ >ウェブフロントエンド >jsチュートリアル >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 サイトの他の関連記事を参照してください。