バックグラウンドで10,000個のデータが失われたどれだけ計画を立てても、逃れられませんでした。バックエンドは本当に一度に何万ものデータをフロントエンドに投げ込んでいました。まあ、少なくともまだ10万には達していません。以下に示すように、背景は次の構造を返します。 定数flatArr = [ { id: '001'、名前: 'ノード 1' }, { id: '0011'、親ID: '001'、名前: 'ノード1-1' }, { id: '00111'、親ID: '0011'、名前: 'ノード 1-1-1' }, { id: '002'、名前: 'ノード 2' }, ] ご覧のとおり、これは実際にはフラットな配列です。私たちの要件は、次のようなツリー構造を受け取る Element-ui のカスケード セレクターでこのようなデータをレンダリングすることです。 オプション = [ { 値: 'zhinan'、 ラベル: 'ガイド'、 子供たち: [ { 値: 'shejiyuanze'、 ラベル: 「デザイン原則」、 子供たち: [ { 値: 'yizhi'、ラベル: 'consistent' }, { 値: 'fankui'、ラベル: 'フィードバック'} ]、 } ] } ] ああ、これはフラット配列をツリー構造に変換する必要がある! 再帰法完成しました。コードは簡潔で、アイデアは明確です。実行するとどうなるでしょうか?ページが停止しています。console.time() によると、必要なツリー構造を計算するのに約 18 秒かかりました。 非再帰的方法ここでは、オブジェクトが参照を保存する機能を巧みに適用しています。毎回、現在のノードの ID がキーとして使用され、対応するノードの参照情報が保存されます。配列をトラバースすると、objMap の子情報が毎回更新されます。このようにして、すべてのノードとその子ノードが objMap に保持されます。最も重要なのは、配列を 1 回トラバースするだけでよく、時間の計算量は O(n) であることです。この方法を使用すると、計算時間はわずか 60 ミリ秒です。 要約する
比較表を見てみましょう: データ量が増えるにつれて時間の計算量も増加するという上記の傾向から、データがどんどん大きくなると、再帰アルゴリズムによって消費される時間は非再帰アルゴリズムによって消費される時間よりもはるかに長くなることがわかります。したがって、データ量が少ない場合は再帰アルゴリズムを使用すると一定の利点がありますが、データがある程度大きくなると、再帰アプローチの欠点がますます明らかになり、非再帰アルゴリズムを使用する方がはるかに高速になります。 最後に、この比較を通じて、アルゴリズムの重要性をはっきりと感じることができると言わなければなりません。実装方法が異なると大きな違いが生じる可能性があり、すべての開発者が注目する価値があります。 JavaScript のフラット配列をツリー構造に変換する実装例については、これで終わりです。JavaScript のフラット配列をツリー構造に変換することに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL SQL ステートメントが遅い場合の一般的な原因と解決策
>>: VMware Workstation での VMware vSphere のセットアップ (グラフィック チュートリアル)
導入メタタグは、HTML言語のHEAD領域にある補助タグです。 meta は、ページの説明、キーワー...
この記事は、参考のためにMySQL 8.0.17のインストールと設定のグラフィックチュートリアルを記...
私が使用しているデータベースはMySQLデータベースバージョン5.7ですまずデータベーステーブルを自...
目次1. 基本的な環境設定2. データベースをインストールする3. zabbix関連コンポーネントを...
HTML入門ハイパーテキスト マークアップ言語: ハイパーテキスト マークアップ言語ハイパーテキスト...
WeChatアプレットの簡単な計算機は参考用です。具体的な内容は次のとおりです。 1. はじめに1....
序文要素がビューポート内にあるかどうかを監視する2つの方法を共有する1. 位置計算Element.g...
序文MySQL バージョン 8.0.23 では、新しい機能「Invisible Column (In...
MVCC MVCC (Multi-Version Concurrency Control) は、マル...
リーダーの指示のもと、Java プロジェクトを引き継ぎ、リファクタリングを行う必要がありました。同時...
目次JavaScript 改ざん防止オブジェクト1. 拡張不可能なオブジェクト2. 封印された物体3...
1. フロート: 主な目的は、テキストを画像の周囲に折り返す効果を実現することです。また、複数列レイ...
目次1. 理論シリアル化可能繰り返し読み取りコミットされた読み取りコミットされていない読み取り2. ...
タイトルの通り、高さは既知で、左と右の列の幅は 300 ピクセル、中央は適応型です。弾性ボックス自体...
必要ページング バーを追加します。これにより、ページにジャンプしたり、ページ番号に従って特定のページ...