堆疊

　　堆疊是一種特殊的的線性表結構，只允許在一端插入和洗掉操作，允許插入和洗掉的一端是堆疊頂，另一端是堆疊底，不包含任何資料的叫空堆疊，堆疊具有后進者先出(Last in first out)簡稱LIFO，堆疊的操作主要有入堆疊、出堆疊如

線性表、鏈表都是線性結構中的一種，只是存盤方式不一樣，叫不同的名稱，

實作堆疊

　　堆疊既可以用陣列來實作，也可以用鏈表來實作，用陣列實作的堆疊，叫作順序堆疊，用鏈表實作的堆疊，叫作鏈式堆疊，

 1 /*
 2  堆疊：只能在堆疊的一邊進行插入、洗掉操作，具有后進先出的特點
 3  用陣列實作的堆疊，叫作順序堆疊、用鏈表實作的堆疊，叫作鏈式堆疊，
 4  */
 5 
 6 class Stack {
 7   constructor () {
 8     this.size = 0
 9     this.stackList = []
10   }
11   // 入堆疊
12   pushStack (data) {
13     this.stackList.unshift(data)
14     this.size++
15     return true
16   }
17   // 出堆疊
18   popStack () {
19     if (this.size < 0) return false
20     this.stackList.shift()
21     this.size--
22   }
23   get length () {
24     return this.size
25   }
26 }
27 
28 let stack = new Stack()
29 stack.pushStack(1)
30 stack.pushStack(2)
31 stack.pushStack(3)
32 console.log(stack)
33 console.log(stack.length)
34 
35 stack.popStack()
36 
37 console.log(stack)
38 console.log(stack.length)

在線 codepen

應用場景

當某個資料集合需要在一端插入和洗掉操作，并且滿足后進先出、先進后出的特性，那么應該用堆疊這種資料結構，

瀏覽器的前進、后退功能

　　瀏覽器的前進后退基本原理很簡單，使用兩個堆疊X、Y，在瀏覽的時候把資料壓入X堆疊，當點擊后退的時候從X中出堆疊，且把資料壓入Y堆疊，當點擊前進的時候把Y堆疊中的資料出堆疊，然后再壓入X堆疊，當堆疊 X 中沒有資料時，那就說明沒有頁面可以繼續后退瀏覽了，當堆疊 Y 中沒有資料，那就說明沒有頁面可以點擊前進按鈕了，

還有很多應用場景，比如撤銷回退、js 執行的函式呼叫堆疊、遞回呼叫堆疊等等，

佇列

　　佇列與堆疊結構類似同樣是一種特殊的的線性表結構，不同的是佇列只允許在一端進行插入操作，在另一端進行洗掉操作，比如生活中的排隊買票，等電梯等先來的先上，后來的人只能依次排隊，不允許插隊，佇列具有先進者先出的特點，

實作佇列

　　佇列跟堆疊一樣，也是一種抽象的資料結構，它具有先進先出的特性，支持在隊尾插入元素，在隊頭洗掉元素，佇列既可以用陣列來實作，也可以用鏈表來實作，用陣列實作的堆疊，叫作順序佇列，用鏈表實作的堆疊，叫作鏈式佇列，

 1 /*
 2   佇列：只能在堆疊的一邊進行插入、另外一邊進行洗掉操作，具有先進先出的特點
 3   用陣列實作的堆疊，叫作順序佇列、用鏈表實作的堆疊，叫作鏈式佇列，
 4  */
 5 class QueueList {
 6   constructor () {
 7     this.size = 0
 8     this.queueList = []
 9   }
10   // 入隊
11   enqueue (data) {
12     this.queueList.push(data)
13     this.size++
14   }
15   // 出隊
16   dequeue () {
17     if (this.size < 0) return false
18     this.queueList.shift()
19     this.size--
20   }
21   clear () {
22     this.queueList = []
23   }
24   get length () {
25     return this.size
26   }
27   get isEmptyQueue () {
28     return !this.queueList.length
29   }
30 }
31 let queue = new QueueList()
32 queue.enqueue(1)
33 queue.enqueue(2)
34 queue.enqueue(3)
35 queue.dequeue()
36 
37 console.log(queue)
38 console.log(queue.length)

在線 codepen

佇列的概念很好理解，基本操作也很容易掌握，

佇列與堆疊

堆疊：先進后出
佇列：先進先出

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/278771.html

標籤：JavaScript

上一篇：如何在CSS中映射滑鼠位置，并實作通過滑鼠移動控制頁面元素效果

下一篇：Vue CLI 是如何實作的 -- 終端命令列工具篇

前端資料結構--線性結構-佇列、堆疊

堆疊

實作堆疊

應用場景

瀏覽器的前進、后退功能

佇列

實作佇列

佇列與堆疊