JavaScript 中的佇列資料結構


在本文中,我們將討論 JavaScript 中的佇列資料結構。它是一個線性資料結構,其中元素的入隊和出隊遵循 FIFO(先進先出順序)。佇列兩端是開放的。一端始終用於插入資料,另一端用於刪除資料。在這裡,我們使用兩個指標後端和前端。後端用於插入資料,前端用於刪除資料。

佇列的現實示例可以是單車道單行道,其中車輛先進入,先退出。

下圖顯示了佇列的工作原理 −

示例 1

以下示例演示如何在 JavaScript 中實現佇列類資料結構。我們還將展示佇列的 enqueue()、peek() 和 size() 方法的使用。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Queue Data Structure</title>
   </head>
   <body>
      <script type="text/javascript">
         class Queue {
            constructor() {
               this.queArr = [];
               this.frontIdx = 0; //head
               this.rearIdx = 0; //tail
            }
            enqueue(elem) {
               this.queArr[this.rearIdx] = elem;
               this.rearIdx++;
            }
            dequeue() {
               if (this.isEmpty()) {
                  document.write("Queue Underflow..!</br>");
                  return;
               }
               let elem = this.queArr[this.frontIdx];
               delete this.queArr[this.frontIdx];
               this.frontIdx++;
               return elem;
            }
            peek() {
               return (
                  "The peek element of the Queue is : " +
                  this.queArr[this.frontIdx] +
                  "</br>"
               );
            }
            size() {
               document.write("The size of the Queue is : ");
               return this.rearIdx - this.frontIdx;
            }
            isEmpty() {
               document.write("<br>");
               return this.queArr.length == 0;
            }
            display() {
               if (this.queArr.length !== 0) {
                  return "The Queue elements are : " + this.queArr + "</br>";
               } else {
                  document.write("The Queue is Empty..! <br>");
               }
            }
            clear() {
               document.write("</br>The Queue is cleared..!" + "<br>");
               this.queArr = [];
            }
         }
            let queue = new Queue();
            queue.enqueue(1);
            queue.enqueue(2);
            queue.enqueue(3);
            queue.enqueue(4);
            queue.enqueue(5);
            document.write(queue.display());
            document.write(queue.peek());
            document.write(queue.size());
      </script>
   </body>
</html>

示例 2

以下示例演示如何在 JavaScript 中實現佇列類資料結構。並且還討論如何對佇列元素執行各種操作,以修改或檢查佇列的狀態。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Queue Data Structure</title>
   </head>
   <body>
   <script type="text/javascript">
      class Queue {
         constructor() {
            this.queArr = [];
            this.frontIdx = 0; //head
            this.rearIdx = 0; //tail
         }
         enqueue(elem) {
            this.queArr[this.rearIdx] = elem;
            this.rearIdx++;
         }
         dequeue() {
            if (this.isEmpty()) {
               document.write("Queue Underflow..!</br>");
               return;
            }
            let elem = this.queArr[this.frontIdx];
            delete this.queArr[this.frontIdx];
            this.frontIdx++;
            return elem;
         }
         peek() {
         return (
               "The peek element of the Queue is : " +
               this.queArr[this.frontIdx] +
               "</br>"
            );
         }
         size() {
            document.write("The size of the Queue is : ");
            return this.rearIdx - this.frontIdx;
         }
         isEmpty() {
            document.write("<br>");
            return this.queArr.length == 0;
         }
         display() {
            if (this.queArr.length !== 0) {
               return "The Queue elements are : " + this.queArr + "</br>";
            } else {
               document.write("The Queue is Empty..! <br>");
            }
         }
        clear() {
            document.write("</br>The Queue is cleared..!" + "<br>");
            this.queArr = [];
         }
      }
      let queue = new Queue();
      queue.enqueue(1);
      queue.enqueue(2);
      queue.enqueue(3);
      queue.enqueue(4);
      queue.enqueue(5);
      document.write(queue.display());
      document.write(queue.peek());
      document.write(queue.size());
      queue.clear();
      queue.display();
   </script>
   </body>
</html>

更新於:16-12-2022

481 Views

開啟你的 職業生涯

透過完成課程獲得認證

開始
廣告
© . All rights reserved.