การ Implement Queue (คิว) ใน JavaScript

Queue เป็นโครงสร้างข้อมูลแบบ FIFO (First In, First Out) - ตัวแรกเข้าตัวแรกออก ใช้ในงานที่ต้องจัดลำดับ เช่น Task Scheduler, Print Queue, BFS Algorithm

ตัวอย่างโค้ด (Class-based)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Queue Implementation</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .result { font-size: 18px; font-weight: 500; color: blueviolet; }
    button { padding: 6px; margin: 4px; }
  </style>
</head>
<body>
  <h1>Implementation of Queue ใน JavaScript</h1>
  <div class="result"></div>
  <br />
  <input type="text" class="enqueueVal" placeholder="Value" />
  <button class="enqueueBtn">Enqueue</button>
  <button class="dequeueBtn">Dequeue</button>
  <button class="Btn">Display</button>
  <h3>คลิกปุ่มด้านบนเพื่อทำ Queue Operations</h3>
  <script>
    const resEle = document.querySelector(".result");
    const BtnEle = document.querySelector(".Btn");
    const enqueueBtnEle = document.querySelector(".enqueueBtn");
    const dequeueBtnEle = document.querySelector(".dequeueBtn");
    
    class Queue {
      constructor() {
        this.items = [];
      }
      
      enqueue(element) {
        this.items.push(element); // เพิ่มท้าย
      }
      
      dequeue() {
        if (this.isEmpty()) {
          return "Underflow: Queue is empty";
        }
        return this.items.shift(); // ลบหน้า
      }
      
      front() {
        return this.isEmpty() ? "Empty" : this.items[0];
      }
      
      isEmpty() {
        return this.items.length === 0;
      }
      
      size() {
        return this.items.length;
      }
      
      display() {
        if (this.isEmpty()) {
          resEle.innerHTML = "Queue is empty";
          return;
        }
        this.items.forEach((item, i) => {
          resEle.innerHTML += `${i}: ${item} `;
        });
      }
    }
    
    const queue1 = new Queue();
    
    BtnEle.addEventListener("click", () => {
      resEle.innerHTML = "";
      queue1.display();
    });
    
    enqueueBtnEle.addEventListener("click", () => {
      const val = document.querySelector(".enqueueVal").value;
      if (val) {
        queue1.enqueue(val);
        resEle.innerHTML = `${val} added to queue`;
        document.querySelector(".enqueueVal").value = "";
      }
    });
    
    dequeueBtnEle.addEventListener("click", () => {
      const removed = queue1.dequeue();
      resEle.innerHTML = `${removed} removed from queue`;
    });
  </script>
</body>
</html>

Queue Operations Complexity

Optimization: Circular Buffer / Two Stacks

// ใช้ 2 Stacks ทำ Queue (Amortized O(1))
class QueueTwoStacks {
  constructor() {
    this.inStack = [];
    this.outStack = [];
  }
  
  enqueue(item) {
    this.inStack.push(item);
  }
  
  dequeue() {
    if (this.outStack.length === 0) {
      while (this.inStack.length > 0) {
        this.outStack.push(this.inStack.pop());
      }
    }
    return this.outStack.pop();
  }
}

ผลลัพธ์

UI แสดงค่าที่ Enqueue/Dequeue และ Display Queue Contents