JavaScript學習總結(二十一)——使用JavaScript的數組實現資料結構中的隊列與堆棧

標籤：sni   zcl   wfs   xdg   aoe   mys   ase   rtk   ict   

今天在項目中要使用JavaScript實現資料結構中的隊列和堆棧，這裡做一下總結。

一、隊列和堆棧的簡單介紹1.1、隊列的基本概念

　　隊列:是一種支援先進先出(FIFO)的集合,即先被插入的資料,先被取出!

　　如所示：

　　

1.2、堆棧的基本概念

　　堆棧:是一種支援後進先出(LIFO)的集合,即後被插入的資料,先被取出!

　　如所示：

　　

二、 在JavaScript中實現隊列和堆棧

　　在JavaScript中實現隊列和數組主要是通過數組，js數組中提供了以下幾個方法可以讓我們很方便實現隊列和堆棧：

• shift:從數組中把第一個元素刪除，並返回這個元素的值。
• unshift: 在數組的開頭添加一個或更多元素，並返回新的長度
• push:在數組的中末尾添加元素，並返回新的長度
• pop:從數組中把最後一個元素刪除，並返回這個元素的值。

2.1、實現隊列

 1 <script type="text/javascript"> 2         //建立一個數組來類比隊列 3         var a=new Array(); 4         console.log(a); 5         //unshift: 在數組的開頭添加一個或更多元素，並返回新的長度 6         console.log("入隊"); 7         a.unshift(1) 8         console.log(a);//----->1 9         a.unshift(2);10         console.log(a);//----->2,111         a.unshift(3);12         console.log(a);//----->3,2,113         a.unshift(4);14         console.log(a);//----->4,3,2,115         console.log("出隊，先進先出");16         console.log(a);17         //pop：從數組中把最後一個元素刪除，並返回這個元素的值18         a.pop();//----->119         console.log(a);20         a.pop();//----->221         console.log(a);22         a.pop();//----->323         console.log(a);24         a.pop();//----->425         console.log(a);26 </script>

　　在google瀏覽器控制台輸出的效果如所示：

　　

2.2、實現堆棧

 1 <script type="text/javascript"> 2         //建立一個數組來類比堆棧 3         var a=new Array(); 4         console.log(a); 5         //push: 在數組的末尾添加一個或更多元素，並返回新的長度 6         console.log("入棧"); 7         a.push(1) 8         console.log(a);//----->1 9         a.push(2);10         console.log(a);//----->1,211         a.push(3);12         console.log(a);//----->1,2,313         a.push(4);14         console.log(a);//----->1,2,3,415         console.log("出棧，後進先出");16         console.log(a);17         //pop：從數組中把最後一個元素刪除，並返回這個元素的值18         a.pop();//----->419         console.log(a);20         a.pop();//----->321         console.log(a);22         a.pop();//----->223         console.log(a);24         a.pop();//----->125         console.log(a);26 </script>

　　在google瀏覽器控制台輸出的效果如所示：

　　

2.3、push方法和unshift方法的效能測試

　　Array的push與unshift方法都能給當前數組添加元素，不同的是，push是在末尾添加，而unshift則是在開頭添加，從原理就可以知道，unshift的效率是較低的。原因是，它每添加一個元素，都要把現有元素往下移一個位置。但到底效率差異有多大呢？下面來簡單測試一下。

 1 <script type="text/javascript"> 2     /* 3     關於代碼中"var s=+newDate();"的技巧說明 4     解釋如下:=+這個運算子是不存在的; 5     +相當於.valueOf(); 6     +new Date()相當於new Date().valueOf() 7     //4個結果一樣返回目前時間的毫秒數 8       alert(+new Date()); 9       alert(+new Date);10       var s=new Date();11       alert(s.valueOf());12       alert(s.getTime());13     */14     var arr = [ ];15     var startTime = +new Date(); //+new Date()相當於new Date().valueOf()，返回目前時間的毫秒數16      // push效能測試 17      for (var i = 0; i < 100000; i++) { 18      　　arr.push(i); 19      }20      var endTime = +new Date();21      console.log("調用push方法往數組中添加100000個元素耗時"+(endTime-startTime)+"毫秒"); 22      23      startTime = +new Date(); 24      arr = [ ]; 25      // unshift效能測試 26      for (var i = 0; i < 100000; i++) { 27      　　arr.unshift(i); 28      }29      endTime = +new Date();30      console.log("調用unshift方法往數組中添加100000個元素耗時"+(endTime-startTime)+"毫秒"); 31 </script>

　　這段代碼分別執行了100000次push和unshift操作，在Google瀏覽器運行一次，得到的結果如所示：
　　
　　可見，unshift比push要慢差不多100倍！因此，平時還是要慎用unshift，特別是對大數組。那如果一定要達到unshift的效果，可以藉助於Array的reverse方法，Array的reverse的方法能夠把一個數組反轉。先把要放進數組的元素用push添加，再執行一次reverse，就達到了unshift的效果。比如：

 1 <script type="text/javascript"> 2       //建立一個數組來類比堆棧 3         var a=new Array(); 4         //使用push方法在數組的末尾添加元素 5         a.push(1) 6         a.push(2); 7         a.push(3); 8         a.push(4); 9         console.log("數組反轉之前數組中的元素順序");10         console.log(a);//----->1,2,3,411         //Array有一個叫做reverse的方法，能夠把一個數組反轉。先把要放進數組的元素用push添加，再執行一次reverse，就達到了unshift的效果12         a.reverse();//使用reverse方法將數組進行反轉13         console.log("數組反轉之後數組中的元素順序");14         console.log(a);15 </script>

　　在google瀏覽器控制台輸出的效果如所示：

　　

　　從運行結果來看，數組元素的順序已經反轉過來了。

2.4、reverse方法的效能測試

　　reverse的效能又如何呢，下面再來測試：

1 <script type="text/javascript">2         var arr = [ ], s = +new Date; 3         for (var i = 0; i < 100000; i++) { 4         　　    arr.push(i); 5         }6         //調用reverse方法將數組裡面的100000元素的順序反轉7         arr.reverse(); 8         console.log("調用reverse方法將數組裡面的100000元素的順序反轉耗時："+(+new Date - s)+"毫秒");9 </script>

　　在google瀏覽器控制台輸出的效果如所示：

　　
　　從運行效果中可以看到，reverse方法的效能極高，可以放心使用。

　　以上就是關於在javascript中通過數組來實現隊列和堆棧的總結，並且簡單測試了一下push、unshift、reverse這幾個方法在操作大數組方面的效能優劣。

JavaScript學習總結(二十一)——使用JavaScript的數組實現資料結構中的隊列與堆棧