JavaScriptはスタック構造の詳細なプロセスを実装する

JavaScriptはスタック構造の詳細なプロセスを実装する

1. スタック構造を理解する

配列は一般的なデータ構造であり、配列内の任意の位置にデータを挿入したり削除したりできることはご存じのとおりです。ただし、特定の機能を実現するために、この任意性を制限しなければならない場合もあります。スタックとキューは、比較的一般的な制限付きデータ構造です。まずはスタックを見てみましょう。
stack 、後入れ先出し ( LIFO ) 順序を持つ制限された線形テーブルです。

  • 制限は、挿入および削除操作がテーブルの一方の端でのみ許可されることです。この端はスタックの上部と呼ばれ、もう一方の端はスタックの下部と呼ばれます。
  • LIFO (後入れ先出し) とは、最後に入力された要素がスタック スペースから最初にポップされることを意味します。
  • スタックに新しい要素を挿入することを、プッシュ、プッシュ、またはプッシュとも呼びます。これは、新しい要素をスタックの最上位要素の上に配置し、それをスタックの新しい最上位要素にします。
  • スタックから要素を削除することは、スタックの作成またはスタックのポップとも呼ばれます。スタックの最上位の要素を削除し、その隣接する要素をスタックの新しい最上位の要素にします。

構造図は以下のとおりです。

人生における積み重ねに似ている

たとえば、コードを入力しているときにエラーが発生して削除する必要がある場合、最初に入力したコードが最後に削除されます。

次に、スタック構造のカプセル化を一緒に実装してみましょう。採用するメソッドは配列に基づいています。

2. スタック構造のカプセル化

まず、スタック構造をカプセル化するクラスを次のように作成します。

関数 Stack(){
            
        }

その中にプロパティとメソッドを追加し、プロパティ メソッドを通じてクラスに配列を追加します。次に、プロトタイプ メソッドを使用して、よく使用される操作を追加します。

スタックに対する一般的な操作は次のとおりです。

  • push (要素): スタックの一番上に新しい要素を追加します。
  • pop() : スタックの一番上の要素を削除する
  • peek( ) : スタックを変更せずにスタックの一番上の要素を返します。
  • isEmpty() : スタックが空かどうかを判定します。スタックに要素がない場合はtrueを返し、そうでない場合はfalseを返します。
  • size() : スタック内の要素数を返す
  • toString() : スタック構造の内容を文字として返します

次に、これらを 1 つずつ実装します。

 関数 Stack(){
     this.items = [];
     // スタックの先頭に新しい要素を追加します。押す()
     Stack.prototype.push = function(要素){
        this.items.push(要素);
     }
      // スタックの一番上の要素を削除する pop()
     Stack.prototype.pop = function(){
         this.items.pop() を返します。
     }
     // スタックを変更せずにスタックの一番上の要素を返す peek()
     Stack.prototype.peek = 関数(){
         this.items[this.items.length-1]を返します。
     }
     // スタックが空かどうかを判定する isEmpty()
     Stack.prototype.isEmpty = 関数(){
         (this.items.length == 0)の場合{
             true を返します。
         }それ以外 {
             false を返します。
         }
     }
     // スタック内の要素数を返す size()
     Stack.prototype.size = function(){
         this.items.length を返します。
     }
     // スタック構造の内容を文字として返す toString()
     Stack.prototype.toString = 関数(){
         var str = '';
         for(var i =0;i<this.items.length;i++){
             str += this.items[i] + ' ';
         }
         str を返します。
     }
 }
       


注:ここでプロトタイプを通じて追加する必要があるのはなぜでしょうか?これは、このメソッドを通じて追加されたメソッドがクラスに追加されるためであり、これを直接追加すると、特定のインスタンスのオブジェクトに追加され、メモリの無駄が発生します。

最後に確認します。コードは次のとおりです。

var スタック = 新しい Stack();
スタックをプッシュします(1);
スタックをプッシュします(2);
スタックをプッシュします(3);
スタックをプッシュします(4);
スタックをプッシュします(5);
console.log(スタック);
console.log('削除されたスタックの一番上の要素は: '+stack.pop());
console.log('スタックの最上位要素は: '+stack.peek());
console.log('スタックは空ですか: '+stack.isEmpty());
console.log('スタック内の要素数は: ' + stack.size());
console.log('スタック構造の内容は次のとおりです:');
コンソールにログ出力します。

出力は次のようになります。

ビルドに成功しました。
例を見てみましょう!

3. 10進数を2進数に変換する

10進数を2進数に変換するにはどうすればいいですか?

10 進数を 2 進数に変換するには、10 進数を 2 で割り、結果が 0 になるまで余りをスタックにプッシュし、最後にスタック内の要素を 1 つずつポップして最終結果を取得します。

次の図に示すように:

具体的なコードは次のとおりです。

 関数 Stack(){
     this.items = [];
     //スタックにプッシュする Stack.prototype.push = function(element){
         this.items.push(要素);
     }
     //ポップアウト Stack.prototype.pop = function(){
         this.items.pop() を返します。
     }
     //スタックが空かどうかを判断します Stack.prototype.isEmpty = function(){
         (this.items.length == 0)の場合{
             true を返します。
         }それ以外{
             false を返します。
         }
     }
 }
 関数decToBin(decNumber){
      var stack = 新しい Stack;
      while(decNumber>0){
          // 剰余を取得してスタックに格納します。stack.push(decNumber%2);
          //新しい除数を取得します。decNumber = Math.floor(decNumber/2);
      }
      //スタックの一番上の要素を取得します。var str = '';
      while(!stack.isEmpty()){
          str += スタック.pop();
      }
      str を返します。
  }
 console.log('100 をバイナリに変換すると次のようになります: '+decToBin(100));
 console.log('50 をバイナリに変換すると次のようになります: '+decToBin(50));
 console.log('20 をバイナリに変換すると次のようになります: '+decToBin(20));
 console.log('34 をバイナリに変換すると次のようになります: '+decToBin(34));

出力は次のようになります。

JavaScriptのスタック構造の実装の詳細なプロセスに関するこの記事はこれで終わりです。JavaScript のスタック構造の実装に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScriptでスタック構造を実装するプロセスの詳細な説明
  • JS アルゴリズムとデータ構造におけるスタック例の詳細な説明
  • JS スタッククラスの実装と使用例
  • JavaScript データ構造スタックの使用例

<<:  9999px に別れを告げる新しい CSS 画像置換テクニック (背景表示と画面外へのテキストの移動)

>>:  HTML でテキスト ボックスのプロンプト機能を実装するさまざまな方法

推薦する

vue-video-player を使用してライブ放送を実現する方法

目次1. vue-video-playerをインストールする2. vue-video-playerを...

MYSQL スロークエリとログの例の説明

1. はじめにスロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメン...

Vue で Axios カプセル化を使用するための完全なチュートリアル

序文現在、プロジェクトでは、Axios ライブラリが HTTP インターフェース リクエストによく使...

ウェブページを作成する際に注意すべき点

--ホームページのバックアップ1.txtテキスト2. 画像をスキャンする3. PSDデザイン原画(A...

Vue カプセル化コンポーネント ツール $attrs、$listeners の使用

目次序文$属性例: $listeners (公式説明)使用シナリオ要約する序文複数レベルのコンポーネ...

HTMLシールドの右クリックメニューと左クリック入力機能の例

右クリックメニューを無効にする <body oncontextmenu=self.event....

mysql-5.7.21-winx64 無料インストール版のインストール - Windows チュートリアル詳細説明

1 ダウンロードアドレスは https://dev.mysql.com/downloads/mysq...

JavaScriptカスタムオブジェクトメソッドの概要

目次1. オブジェクトを使用してオブジェクトを作成する2. コンストラクタを使用してオブジェクトを作...

SQL で行の最大値または最小値を取得する方法

元データと対象データSQL文を実装する(最大) 選択 店、 月、 最大(dz,fz,sp) が最大値...

CSS が最初のサイクルで画像を読み込むために @keyframes を使用するときに発生するホワイトギャップの問題 (フラッシュ画面) をすばやく解決します。

問題の説明: CSS アニメーション プロパティを使用すると、ループが最初に読み込まれたときに白いギ...

純粋な CSS で DIV サスペンションを実装するサンプル コード (固定位置)

DIV フローティング効果 (固定位置) は CSS のみで実装されており、IE8、360、Fir...

Linux DockerでSpringbootプロジェクトを実行するための詳細な手順

導入: springboot プロジェクトを実行する Docker の構成は実は非常にシンプルで、L...

JavaScriptオブジェクト指向について学ぼう

目次JavaScript プロトタイプチェーンオブジェクトプロトタイプトップレベルのプロトタイプOb...

Vue 3 での watch と watchEffect の新しい使い方

目次1. 時計の新しい使い方1.1. ウォッチの使用構文1.2. 複数の属性値を監視する1.3. 参...

momentJs を使用してカウントダウン コンポーネントを作成する (サンプル コード)

今日はvueとmomentで作ったカウントダウンを紹介したいと思います。具体的な内容は以下のとおりで...