1. 程式人生 > >JavaScript實現佇列結構(Queue)

JavaScript實現佇列結構(Queue)

## JavaScript實現佇列結構(Queue) ### 一、佇列簡介 佇列是是一種受限的線性表,特點為**先進先出**(**FIFO**:first in first out)。 * 受限之處在於它只允許在表的**前端**(front)進行刪除操作; * 在表的**後端**(rear)進行插入操作; ![image-20200226171659886](https://gitee.com/ahuntsun/BlogImgs/raw/master/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95/%E9%98%9F%E5%88%97/1.png) 相當於排隊買票,先來的先買票,後來的後買票。 ![image-20200226171449228](https://gitee.com/ahuntsun/BlogImgs/raw/master/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95/%E9%98%9F%E5%88%97/2.png) **佇列的應用:** * 列印佇列:計算機列印多個檔案的時候,需要排隊列印; * 執行緒佇列:當開啟多執行緒時,當新開啟的執行緒所需的資源不足時就先放入執行緒佇列,等待CPU處理; **佇列類的實現:** 佇列的實現和棧一樣,有兩種方案: * 基於陣列實現; * 基於連結串列實現; **佇列的常見操作:** * enqueue(element):向佇列尾部新增一個(或多個)新的項; * dequeue():移除佇列的第一(即排在佇列最前面的)項,並返回被移除的元素; * front():返回佇列中的第一個元素——最先被新增,也將是最先被移除的元素。佇列不做任何變動(不移除元素,只返回元素資訊與Stack類的peek方法非常類似); * isEmpty():如果佇列中不包含任何元素,返回true,否則返回false; * size():返回佇列包含的元素個數,與陣列的length屬性類似; * toString():將佇列中的內容,轉成字串形式; ### 二、封裝佇列類 #### 2.1.程式碼實現 ``` // 基於陣列封裝佇列類 function Queue() { // 屬性 this.items = [] // 方法 // 1.enqueue():將元素加入到佇列中 Queue.prototype.enqueue = element => { this.items.push(element) } // 2.dequeue():從佇列中刪除前端元素 Queue.prototype.dequeue = () => { return this.items.shift() } // 3.front():檢視前端的元素 Queue.prototype.front = () => { return this.items[0] } // 4.isEmpty:檢視佇列是否為空 Queue.prototype.isEmpty = () => { return this.items.length == 0; } // 5.size():檢視佇列中元素的個數 Queue.prototype.size = () => { return this.items.length } // 6.toString():將佇列中元素以字串形式輸出 Queue.prototype.toString = () => { let resultString = '' for (let i of this.items){ resultString += i + ' ' } return resultString } } ``` **測試程式碼:** ``` // 建立佇列 let queue = new Queue() // 將元素加入到佇列中 queue.enqueue('a') queue.enqueue('b') queue.enqueue('c') queue.enqueue('d') console.log(queue); //58 // 從佇列中刪除元素 queue.dequeue() console.log(queue); //62 queue.dequeue() console.log(queue); //64 //front console.log(queue.front()); //67 // 驗證其他方法 console.log(queue.isEmpty()); //70 console.log(queue.size()); //71 console.log(queue.toString()); //72 ``` **測試結果:** ![image-20200305211334015](https://gitee.com/ahuntsun/BlogImgs/raw/master/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95/%E9%98%9F%E5%88%97/3.png) #### 2.2.佇列的應用 使用佇列實現小遊戲:擊鼓傳花,傳入一組資料和設定的數字num,迴圈遍歷陣列內元素,遍歷到的元素為指定數字num時將該元素刪除,直至陣列剩下一個元素。 **程式碼實現:** ``` // 佇列應用:面試題:擊鼓傳花 let passGame = (nameList, num) => { //1.建立佇列結構 let queue = new Queue() //2.將所有人依次加入佇列 // 這是ES6的for迴圈寫法,i相當於nameList[i] for(let i of nameList){ queue.enqueue(i) } // 3.開始數數 while(queue.size() > 1){//佇列中只剩1個人就停止數數 // 不是num的時候,重新加入佇列末尾 // 是num的時候,將其從佇列中刪除 // 3.1.num數字之前的人重新放入佇列的末尾(把佇列前面刪除的加到佇列最後) for(let i = 0; i< num-1; i++ ){ queue.enqueue(queue.dequeue()) } // 3.2.num對應這個人,直接從佇列中刪除 /* 思路是這樣的,由於佇列沒有像陣列一樣的下標值不能直接取到某一元素,所以採用,把num前面的num-1個元素先刪除後新增到佇列末尾,這樣第num個元素就排到了佇列的最前面,可以直接使用dequeue方法進行刪除 */ queue.dequeue() } //4.獲取剩下的那個人 console.log(queue.size()); //104 let endName = queue.front() console.log('最終剩下的人:' + endName); //106 return nameList.indexOf(endName); } //5.測試擊鼓傳花 let names = ['lily', 'lucy', 'Tom', 'Lilei', 'Tony'] console.log(passGame(names, 3)); //113 ``` **測試結果:** ![image-20200305212021550](https://gitee.com/ahuntsun/BlogImgs/raw/master/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95/%E9%98%9F%E5%88%97/4.png) ### 三、優先佇列 優先順序佇列主要考慮的問題為: * 每個元素不再只是一個數據,還包含資料的優先順序; * 在新增資料過程中,根據優先順序放入到正確位置; #### 3.1.優先順序佇列的實現 **程式碼實現:** ``` // 封裝優先順序佇列 function PriorityQueue() { //內部類:在類裡面再封裝一個類;表示帶優先順序的資料 function QueueElement(element, priority) { this.element = element; this.priority = priority; } // 封裝屬性 this.items = [] // 1.實現按照優先順序插入方法 PriorityQueue.prototype.enqueue = (element, priority) =>
{ // 1.1.建立QueueElement物件 let queueElement = new QueueElement(element, priority) // 1.2.判斷佇列是否為空 if(this.items.length == 0){ this.items.push(queueElement) }else{ // 定義一個變數記錄是否成功添加了新元素 let added = false for(let i of this.items){ // 讓新插入的元素與原有元素進行優先順序比較(priority越小,優先順序越大) if(queueElement.priority < i.priority){ this.items.splice(i, 0, queueElement) added = true // 新元素已經找到插入位置了可以使用break停止迴圈 break } } // 新元素沒有成功插入,就把它放在佇列的最前面 if(!added){ this.items.push(queueElement) } } } // 2.dequeue():從佇列中刪除前端元素 PriorityQueue.prototype.dequeue = () =>
{ return this.items.shift() } // 3.front():檢視前端的元素 PriorityQueue.prototype.front = () => { return this.items[0] } // 4.isEmpty():檢視佇列是否為空 PriorityQueue.prototype.isEmpty = () => { return this.items.length == 0; } // 5.size():檢視佇列中元素的個數 PriorityQueue.prototype.size = () =>
{ return this.items.length } // 6.toString():以字串形式輸出佇列中的元素 PriorityQueue.prototype.toString = () => { let resultString = '' for (let i of this.items){ resultString += i.element + '-' + i.priority + ' ' } return resultString } } ``` **測試程式碼:** ``` // 測試程式碼 let pq = new PriorityQueue(); pq.enqueue('Tom',111); pq.enqueue('Hellen',200); pq.enqueue('Mary',30); pq.enqueue('Gogo',27); // 列印修改過後的優先佇列物件 console.log(pq); ``` **測試結果:** ![image-20200226223314535](https://gitee.com/ahuntsun/BlogImgs/raw/master/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95/%E9%98%9F%E5%88%97/5.png) #### 3.2.注意點 **關於陣列方法splice用法**: * splice(1,0,'Tom'):表示在索引為1的元素前面插入元素’Tom‘(也可以理解為從索引為1的元素開始刪除,刪除0個元素,再在索引為1的元素前面新增元素'Tom'); * splice(1,1,'Tom'):表示從索引為1的元素開始刪除(包括索引為1的元素),共刪除1個元素,並新增元素'Tom'。即把索引為1的元素替換為元素'Tom'。 **陣列的push方法在陣列、棧和佇列中的形式:** * **陣列**:在陣列[0,1,2]中,pop(3),結果為[0,1,2,3]; * **棧**:執行pop(0),pop(1),pop(2),pop(3),從棧底到棧頂的元素分別為:0,1,2,3;如果看成陣列,可寫為[0,1,2,3],但是索引為3的元素3其實是棧頂元素;所以說棧的push方法是向棧頂新增元素(但在陣列的視角下為向陣列尾部新增元素); * **佇列**:enqueue方法可以由陣列的push方法實現,與陣列相同,相當於在陣列尾部新增元素。 可以這樣想:棧結構是頭朝下(索引值由下往上增大)的陣列結構。 ![image-20200226231025462](https://gitee.com/ahuntsun/BlogImgs/raw/master/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95/%E9%98%9F%E5%88%9