「労働者が自分の仕事をうまくやりたいなら、まず自分の道具を研ぎ澄まさなければなりません。」 - 孔子、「論語。陸霊公」
表紙 > プログラミング > スタックのデータ構造を理解する: JavaScript でスタックを実装するためのステップバイステップ ガイド

スタックのデータ構造を理解する: JavaScript でスタックを実装するためのステップバイステップ ガイド

2024 年 11 月 17 日に公開
ブラウズ:387

スタックは、プレートのスタックのように機能する単純な線形データ構造です ?️。これは後入れ先出し (LIFO) の原則に従います。これをプレートの山と考えてください。プレートを追加または削除できるのは、山の最上部のみです。

スタックをより深く理解するために、短い想像の旅に出かけましょう ?.
あなたが高級レストランにいて、キッチンのスタッフが忙しい夜の準備をしているところを想像してみてください ?‍?。食器エリアには、使用されるのを待っている背の高い皿の山があります。客が到着して注文が殺到すると、スタッフが山の上から皿を取り出します。きれいなプレートが追加されると、すぐにその上に置かれます。このシンプルなシステムにより、スタックの一番下にある最も長く存在したプレートが最後に使用され、一番上の新しく洗浄されたプレートが最初に使用されます。 ✨.

Understanding Stack Data Structure: A Step-by-Step Guide to Implementing Stack in JavaScript

これは本質的に、スタック データ構造がどのように機能するかです。スタックは、後入れ先出し (LIFO) 原則に従う線形データ構造です。プレートのスタックと同様に、スタックに追加された最後のアイテムが最初に削除されます。

目次

スタック データ構造に関するこの包括的なチュートリアルでは、シンプルで初心者向けのアプローチで次のトピックを検討します。

  1. スタックとは何ですか?
  2. スタック使用の長所と短所
  3. スタックの現実世界のアプリケーション
  4. スタック上のキー操作
  5. JavaScript でのスタック実装
  6. 結論


準備はできたか?飛び込みましょう

Understanding Stack Data Structure: A Step-by-Step Guide to Implementing Stack in JavaScript

スタックとは何ですか?

スタックは、後入れ先出し (LIFO) 原則に従う線形データ構造です。これは、スタックに追加された最後の要素が最初に削除されることを意味します。これは本のスタックのようなものだと考えてください。本の追加または削除は、スタックの一番上にのみ行うことができます。

スタックの使用の長所と短所

フローを続行してコードを記述する前に、スタックを使用する場所と使用しない場所を理解しておくとよいでしょう。以下の表は、スタックの明確な長所と短所を詳細に示しています。

長所 短所
シンプルで実装が簡単 アクセス制限あり(直接アクセスできるのは最上位要素のみ)
後入れ先出し (LIFO) 操作の効率化 要素のランダム アクセスには適していません
プッシュおよびポップ操作の定数時間 O(1) 適切に管理しないとスタック オーバーフローが発生する可能性があります
アルゴリズムでの状態の追跡に役立ちます (深さ優先検索など) 任意の要素の検索やアクセスには最適ではありません
メモリ管理に役立ちます (プログラミング言語のコールスタックなど) 一部の実装での固定サイズ(配列ベースのスタック)
データを元に戻すのに便利 動的実装ではサイズ変更が必要になる場合があり、コストがかかる可能性があります
再帰的アルゴリズムを自然にサポート 頻繁な走査が必要な大規模なデータセットには効率的ではありません
式の評価と構文解析に役立ちます 空のスタックでポップ操作が呼び出された場合、アンダーフローが発生する可能性があります
ソフトウェアの元に戻すメカニズムに役立ちます より複雑なデータ構造と比較して機能が制限されている
特定の種類のデータ構成 (ブラウザ履歴など) に効率的です キューのような (FIFO) 動作を必要とする問題には適していません

スタック上のキー操作

スタック上で実行できる基本的な操作は次のとおりです:

  1. Push(): スタックの先頭に要素を追加します。
  2. Pop(): スタックから最上位の要素を削除します。
  3. Peak(): スタックの最上位要素を削除せずに返します。
  4. isEmpty(): スタックが空かどうかを確認します。
  5. size(): スタック内の要素の数を返します。

スタックの実世界のアプリケーション

スタックはコンピューター サイエンスとソフトウェア開発のあらゆる場所に存在します。一般的なアプリケーションをいくつか示します:

  1. 元に戻す機能: テキスト エディターまたはグラフィック デザイン ソフトウェアでは、各アクションはスタックにプッシュされます。 「元に戻す」を押すと、最新のアクションがスタックからポップされて取り消されます。

  2. ブラウザ履歴: 新しいページにアクセスすると、そのページはスタックにプッシュされます。 「戻る」ボタンを押すと、現在のページがスタックからポップされ、前のページが表示されます。

  3. 関数呼び出しスタック: プログラミング言語では、関数呼び出しはスタックを使用して管理されます。関数が呼び出されると、その関数は呼び出しスタックにプッシュされます。戻ってくると外れます。

  4. 式の評価: スタックは、算術式、特に後置表記の式を評価するために使用されます。

  5. バックトラッキング アルゴリズム: 迷路解決やパズル解決などの問題では、スタックがたどったパスを追跡できるため、必要に応じて簡単にバックトラッキングできます。

JavaScript でのスタックの実装

それでは、JavaScript でスタックを実装してみましょう。 JavaScript でスタックを実装するにはさまざまな方法があることを知っておくことが重要です。スタックを実装する一般的な方法の 1 つは配列を使用することであり、もう 1 つの方法はリンク リストを使用することです。この記事では、リンクリスト(単一リンクリスト)を使ったスタックを実装していきます。

リンクリストを使用したスタックの実装

リンク リストの仕組みをまだ覚えているでしょうか?この同じシリーズの以前の記事でリンク リストの実装を確認する必要があるかもしれません。

さて、単一リンクリストを使用してスタックの実装を開始しましょう。しましょうか?

Understanding Stack Data Structure: A Step-by-Step Guide to Implementing Stack in JavaScript

まず、スタックの個々の項目を表す Node クラスを作成します。

class Node {
  constructor(data) {
    this.data = data;
    this.next = null;
  }
}

次に、スタックを表す Stack クラスを作成します。

class Stack {
  constructor() {
    this.top = null;
    this.size = 0;
  }

  // Stack Operations will be implemented here ?
}

押し込み操作

プッシュ操作により、スタックの先頭に新しい要素が追加されます。新しい StackNode を作成し、次のポインターを現在の先頭に設定し、この新しいノードを指すように先頭を更新します。最後に、サイズを増やします。

  // Push element to the top of the stack
  push(element) {
    const newNode = new Node(element);
    newNode.next = this.top;
    this.top = newNode;
    this.size  ;
  }

ポップ操作

pop 操作は、スタックから最上位の要素を削除します。まずスタックが空かどうかを確認します。存在する場合は、エラー メッセージが返されます。それ以外の場合は、最上位要素を削除し、次のノードへの最上位ポインタを更新し、サイズをデクリメントします。最後に、削除された要素を返します。

  // Remove and return the top element
  pop() {
    if (this.isEmpty()) {
      return "Stack is empty";
    }
    const poppedElement = this.top.data;
    this.top = this.top.next;
    this.size--;
    return poppedElement;
  }

ピーク操作

ピーク操作は、先頭の要素を削除せずに返します。まずスタックが空かどうかを確認します。存在する場合は、エラー メッセージが返されます。それ以外の場合は、先頭要素のデータを返します。

  // Return the top element without removing it
  peek() {
    if (this.isEmpty()) {
      return "Stack is empty";
    }
    return this.top.data;
  }

isEmpty オペレーション

isEmpty オペレーションは、スタックが空かどうかをチェックします。スタックが空の場合は true を返し、それ以外の場合は false を返します。

  // Check if the stack is empty
  isEmpty() {
    return this.size === 0;
  }

getSize オペレーション

getSize オペレーションはスタックのサイズを返します。スタック内の要素の数を返します。

  // Return the size of the stack
  getSize() {
    return this.size;
  }

印刷操作

印刷操作ではスタックが印刷されます。先頭要素のデータを返します。

  // Print the stack
  print() {
    let current = this.top;
    let result = "";
    while (current) {
      result  = current.data   " ";
      current = current.next;
    }
    console.log(result.trim());
  }

使用例

// Usage example
const customStack = new CustomStack();
customStack.push(10);
customStack.push(20);
customStack.push(30);
console.log(customStack.pop()); // 30
console.log(customStack.peek()); // 20
console.log(customStack.getSize()); // 2
console.log(customStack.isEmpty()); // false
customStack.print(); // 20 10

この実装では、スタックを表すためにリンク リスト (単一リンク リスト) 構造を使用しました。各要素は、データ値と次のノードへの参照を持つノードです。スタックの最上位は常に、最後に追加されたノードです。

結論

スタックは、後入れ先出し (LIFO) 原則に従うコンピューター サイエンスの基本的なデータ構造です。これらは、関数呼び出しの管理、元に戻す機能の実装、算術式の評価など、さまざまなアプリケーションで使用されます。

このチュートリアルでは、スタックの基本、スタックの使用の長所と短所、および JavaScript での実装 (リンク リストを使用) について説明しました。スタックを理解するということは、スタックの実装方法を知るだけでなく、問題を解決するための適切なツールであることを認識することでもあります。

ソフトウェア開発の旅を続けると、スタックが問題解決ツールキットに不可欠なツールであることがわかります。これらはシンプルでありながら強力であり、これらをマスターすると、効率的なアルゴリズムとデータ構造を設計する能力が大幅に向上します。



常に最新情報を入手してつながりを保つ

このシリーズのどの部分も見逃さないようにし、ソフトウェア開発 (Web、サーバー、モバイル、またはスクレイピング / オートメーション)、データ構造とアルゴリズム、その他のエキサイティングな技術に関するより詳細なディスカッションのために私に連絡してください。トピックについては、フォローしてください:

  • GitHub
  • リンク済み
  • X (Twitter)

引き続きコーディングをお楽しみください ?‍??






          

            
  

            
                    
リリースステートメント この記事は次の場所に転載されています: https://dev.to/emmanuelayinde/ Understanding-stack-data- Structure-a-step-by-step-guide-to-implementing-stack-in-javascript-3f62?1権利侵害の場合は、ご連絡ください。削除するには、[email protected] までご連絡ください。
最新のチュートリアル もっと>

免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。

Copyright© 2022 湘ICP备2022001581号-3