{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/stack-vs-queue/", "result": {"data":{"site":{"siteMetadata":{"title":"WatchMeCode"}},"markdownRemark":{"id":"b86ad59c-5002-58c8-be83-5f125db941d9","excerpt":"Queue Queue（隊列）是一種先進先出（FIFO, First-In-First-Out）的資料結構，元素按照加入的順序被處理。Queue 的基本操作包括： enqueue: 將元素加入隊列的尾部。 dequeue: 移除並回傳隊列的頭部元素。 peek: 查看隊列的頭部元素但不移除。 isEmpty…","html":"

Queue

\n

Queue（隊列）是一種先進先出（FIFO, First-In-First-Out）的資料結構，元素按照加入的順序被處理。Queue 的基本操作包括：

\n\n

Queue 在許多情境中非常有用，例如任務排程、廣度優先搜尋（BFS）等。以下是一個簡單的 Queue 實現範例：

\n
class Queue<T> {\n  private items: Record<number, T> = {};\n  private head: number = 0;\n  private tail: number = 0;\n\n  /**\n   * 將元素加入隊列 (Producer 用)\n   */\n  enqueue(element: T): void {\n    this.items[this.tail] = element;\n    this.tail++;\n  }\n\n  /**\n   * 移除並回傳隊頭元素 (Consumer 用)\n   */\n  dequeue(): T | undefined {\n    if (this.isEmpty) return undefined;\n\n    const item = this.items[this.head];\n    delete this.items[this.head];\n    this.head++;\n    return item;\n  }\n\n  /**\n   * 取得目前的隊列長度\n   */\n  get size(): number {\n    return this.tail - this.head;\n  }\n\n  /**\n   * 檢查隊列是否為空\n   */\n  get isEmpty(): boolean {\n    return this.size === 0;\n  }\n\n  /**\n   * 查看隊頭元素但不移除\n   */\n  peek(): T | undefined {\n    return this.items[this.head];\n  }\n}\n\n// --- 使用範例 ---\ninterface Task {\n  id: number;\n  data: string;\n}\n\nconst taskQueue = new Queue<Task>();\n\n// 生產者，將任務加入隊列\ntaskQueue.enqueue({ id: 1, data: \"處理圖片\" });\ntaskQueue.enqueue({ id: 2, data: \"發送郵件\" });\n\nconsole.log(taskQueue.peek()) // 查看隊頭任務\n\n// 消費者，從隊列中取出任務並處理\nwhile (!taskQueue.isEmpty) {\n  const task = taskQueue.dequeue();\n  console.log(`正在處理：${task?.data}`);\n}
\n

BigO 分析

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
操作說明時間複雜度
enqueue尾端加入元素O(1)
dequeue從頭端移除元素O(1)
peek查看頭部元素O(1)
isEmpty檢查是否為空O(1)
size取得目前長度O(1)
\n

Shift

\n

在 JavaScript 中，陣列的 shift 方法會移除並回傳陣列的第一個元素。雖然 shift 的行為類似於 Queue 的 dequeue 操作，但它的時間複雜度是 O(n)，因為在移除第一個元素後，陣列中的所有其他元素都需要向前移動一個位置。因此，在需要頻繁進行隊列操作的情況下，使用 shift 可能會導致效能問題。

\n

Stack

\n

Stack（堆疊）是一種後進先出（LIFO, Last-In-First-Out）的資料結構，元素按照加入的順序被處理，但最後加入的元素會最先被處理。Stack 的基本操作包括：

\n\n
class Stack<T> {\n  private items: T[] = [];\n\n  /**\n   * 推入元素 (Push)\n   */\n  push(element: T): void {\n    this.items.push(element);\n  }\n\n  /**\n   * 彈出最上層元素 (Pop)\n   */\n  pop(): T | undefined {\n    if (this.isEmpty) return undefined;\n    return this.items.pop();\n  }\n\n  /**\n   * 查看最上層元素但不移除 (Peek)\n   */\n  peek(): T | undefined {\n    return this.items[this.items.length - 1];\n  }\n\n  /**\n   * 檢查是否為空\n   */\n  get isEmpty(): boolean {\n    return this.items.length === 0;\n  }\n\n  /**\n   * 目前堆疊高度\n   */\n  get size(): number {\n    return this.items.length;\n  }\n\n  /**\n   * 清空堆疊\n   */\n  clear(): void {\n    this.items = [];\n  }\n}\n\n// --- 使用範例：瀏覽器歷史紀錄 (Undo 功能) ---\nconst historyStack = new Stack<string>();\n\n// 用戶瀏覽頁面\nhistoryStack.push(\"首頁\");\nhistoryStack.push(\"產品列表\");\nhistoryStack.push(\"產品詳情頁\");\n\nconsole.log(`目前頁面: ${historyStack.peek()}`); // \"產品詳情頁\"\n\n// 用戶點擊「上一頁」\nconst lastPage = historyStack.pop();\nconsole.log(`回退自: ${lastPage}`); // \"產品詳情頁\"\nconsole.log(`現在回到: ${historyStack.peek()}`); // \"產品列表\"
\n

BigO 分析

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
操作說明時間複雜度
push將元素放到頂部O(1)
pop移除頂部元素O(1)
peek查看頂部元素O(1)
isEmpty檢查是否為空O(1)
size取得目前高度O(1)
clear清空整個 StackO(1) 或 O(n)
\n

Conclusion

\n

Stack 適合處理「最後進來的先處理」的場景，例如函式呼叫堆疊、Undo/Redo、DFS（深度優先搜尋）等。

\n

Queue 則適合處理「先進來的先處理」的場景，例如任務排程、BFS（廣度優先搜尋）、生產者－消費者模式等。

\n

在現今有 AI 輔助撰寫程式碼的情況下，Stack 與 Queue 的實作細節其實已經不是重點。更重要的是理解它們背後的行為模型，以及在什麼情境下應該選擇哪一種資料結構。

\n

實務開發中，我們更常面對的是這些選擇：

\n\n

難的是在正確的情境下做出合適的選擇。

","frontmatter":{"title":"Stack and Queue Algorithm","date":"March 23, 2026","description":"2025 年末，在處理公司一些專案，像是之前文章的 Producer-Consumer Pattern...等，其實本質上就是 Queue 的延伸概念及實際使用情境，所以今天就想來寫一下 Stack 與 Queue 的演算法差異。","tags":["javascript"]}},"previous":{"fields":{"slug":"/react-hook-form-101/"},"frontmatter":{"title":"React Hook Form with zod"}},"next":null},"pageContext":{"id":"b86ad59c-5002-58c8-be83-5f125db941d9","previousPostId":"57342f51-7c63-5b9d-87c1-97398ce29e5d","nextPostId":null}}, "staticQueryHashes": ["2841359383","465575234"]}