JavaScript數(shù)組實(shí)現(xiàn)數(shù)據(jù)結(jié)構(gòu)中的隊(duì)列與堆棧
一、隊(duì)列和堆棧的簡(jiǎn)單介紹
1.1、隊(duì)列的基本概念
隊(duì)列:是一種支持先進(jìn)先出(FIFO)的集合,即先被插入的數(shù)據(jù),先被取出!
如下圖所示:

1.2、堆棧的基本概念
堆棧:是一種支持后進(jìn)先出(LIFO)的集合,即后被插入的數(shù)據(jù),先被取出!
如下圖所示:

二、 在JavaScript中實(shí)現(xiàn)隊(duì)列和堆棧
在JavaScript中實(shí)現(xiàn)隊(duì)列和數(shù)組主要是通過數(shù)組,js數(shù)組中提供了以下幾個(gè)方法可以讓我們很方便實(shí)現(xiàn)隊(duì)列和堆棧:
•shift:從數(shù)組中把第一個(gè)元素刪除,并返回這個(gè)元素的值。
•unshift: 在數(shù)組的開頭添加一個(gè)或更多元素,并返回新的長(zhǎng)度
•push:在數(shù)組的中末尾添加元素,并返回新的長(zhǎng)度
•pop:從數(shù)組中把最后一個(gè)元素刪除,并返回這個(gè)元素的值。
2.1、實(shí)現(xiàn)隊(duì)列
<script type="text/javascript">
//創(chuàng)建一個(gè)數(shù)組來(lái)模擬隊(duì)列
var a=new Array();
console.log(a);
//unshift: 在數(shù)組的開頭添加一個(gè)或更多元素,并返回新的長(zhǎng)度
console.log("入隊(duì)");
a.unshift()
console.log(a);//----->
a.unshift();
console.log(a);//----->,
a.unshift();
console.log(a);//----->,,
a.unshift();
console.log(a);//----->,,,
console.log("出隊(duì),先進(jìn)先出");
console.log(a);
//pop:從數(shù)組中把最后一個(gè)元素刪除,并返回這個(gè)元素的值
a.pop();//----->
console.log(a);
a.pop();//----->
console.log(a);
a.pop();//----->
console.log(a);
a.pop();//----->
console.log(a);
</script>
在google瀏覽器控制臺(tái)輸出的效果如下圖所示:

2.2、實(shí)現(xiàn)堆棧
<script type="text/javascript">
//創(chuàng)建一個(gè)數(shù)組來(lái)模擬堆棧
var a=new Array();
console.log(a);
//push: 在數(shù)組的末尾添加一個(gè)或更多元素,并返回新的長(zhǎng)度
console.log("入棧");
a.push()
console.log(a);//----->
a.push();
console.log(a);//----->,
a.push();
console.log(a);//----->,,
a.push();
console.log(a);//----->,,,
console.log("出棧,后進(jìn)先出");
console.log(a);
//pop:從數(shù)組中把最后一個(gè)元素刪除,并返回這個(gè)元素的值
a.pop();//----->
console.log(a);
a.pop();//----->
console.log(a);
a.pop();//----->
console.log(a);
a.pop();//----->
console.log(a);
</script>
在google瀏覽器控制臺(tái)輸出的效果如下圖所示:

2.3、push方法和unshift方法的性能測(cè)試
Array的push與unshift方法都能給當(dāng)前數(shù)組添加元素,不同的是,push是在末尾添加,而unshift則是在開頭添加,從原理就可以知道,unshift的效率是較低的。原因是,它每添加一個(gè)元素,都要把現(xiàn)有元素往下移一個(gè)位置。但到底效率差異有多大呢?下面來(lái)簡(jiǎn)單測(cè)試一下。
<script type="text/javascript">
/*
關(guān)于代碼中"var s=+newDate();"的技巧說明
解釋如下:=+這個(gè)運(yùn)算符是不存在的;
+相當(dāng)于.valueOf();
+new Date()相當(dāng)于new Date().valueOf()
//個(gè)結(jié)果一樣返回當(dāng)前時(shí)間的毫秒數(shù)
alert(+new Date());
alert(+new Date);
var s=new Date();
alert(s.valueOf());
alert(s.getTime());
*/
var arr = [ ];
var startTime = +new Date(); //+new Date()相當(dāng)于new Date().valueOf(),返回當(dāng)前時(shí)間的毫秒數(shù)
// push性能測(cè)試
for (var i = ; i < ; i++) {
arr.push(i);
}
var endTime = +new Date();
console.log("調(diào)用push方法往數(shù)組中添加個(gè)元素耗時(shí)"+(endTime-startTime)+"毫秒");
startTime = +new Date();
arr = [ ];
// unshift性能測(cè)試
for (var i = ; i < ; i++) {
arr.unshift(i);
}
endTime = +new Date();
console.log("調(diào)用unshift方法往數(shù)組中添加個(gè)元素耗時(shí)"+(endTime-startTime)+"毫秒");
</script>
這段代碼分別執(zhí)行了100000次push和unshift操作,在Google瀏覽器運(yùn)行一次,得到的結(jié)果如下圖所示:

可見,unshift比push要慢差不多100倍!因此,平時(shí)還是要慎用unshift,特別是對(duì)大數(shù)組。那如果一定要達(dá)到unshift的效果,可以借助于Array的reverse方法,Array的reverse的方法能夠把一個(gè)數(shù)組反轉(zhuǎn)。先把要放進(jìn)數(shù)組的元素用push添加,再執(zhí)行一次reverse,就達(dá)到了unshift的效果。比如:
<script type="text/javascript">
//創(chuàng)建一個(gè)數(shù)組來(lái)模擬堆棧
var a=new Array();
//使用push方法在數(shù)組的末尾添加元素
a.push()
a.push();
a.push();
a.push();
console.log("數(shù)組反轉(zhuǎn)之前數(shù)組中的元素順序");
console.log(a);//----->,,,
//Array有一個(gè)叫做reverse的方法,能夠把一個(gè)數(shù)組反轉(zhuǎn)。先把要放進(jìn)數(shù)組的元素用push添加,再執(zhí)行一次reverse,就達(dá)到了unshift的效果
a.reverse();//使用reverse方法將數(shù)組進(jìn)行反轉(zhuǎn)
console.log("數(shù)組反轉(zhuǎn)之后數(shù)組中的元素順序");
console.log(a);
</script>
在google瀏覽器控制臺(tái)輸出的效果如下圖所示:

從運(yùn)行結(jié)果來(lái)看,數(shù)組元素的順序已經(jīng)反轉(zhuǎn)過來(lái)了。
2.4、reverse方法的性能測(cè)試
reverse的性能又如何呢,下面再來(lái)測(cè)試:
<script type="text/javascript">
var arr = [ ], s = +new Date;
for (var i = ; i < ; i++) {
arr.push(i);
}
//調(diào)用reverse方法將數(shù)組里面的元素的順序反轉(zhuǎn)
arr.reverse();
console.log("調(diào)用reverse方法將數(shù)組里面的元素的順序反轉(zhuǎn)耗時(shí):"+(+new Date - s)+"毫秒");
</script>
在google瀏覽器控制臺(tái)輸出的效果如下圖所示:

從運(yùn)行效果中可以看到,reverse方法的性能極高,可以放心使用。
以上就是關(guān)于在javascript中通過數(shù)組來(lái)實(shí)現(xiàn)隊(duì)列和堆棧的總結(jié),并且簡(jiǎn)單測(cè)試了一下push、unshift、reverse這幾個(gè)方法在操作大數(shù)組方面的性能優(yōu)劣。
以上所述是小編給大家介紹的JavaScript數(shù)組實(shí)現(xiàn)數(shù)據(jù)結(jié)構(gòu)中的隊(duì)列與堆棧,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- JavaScript數(shù)據(jù)結(jié)構(gòu)之優(yōu)先隊(duì)列與循環(huán)隊(duì)列實(shí)例詳解
- JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之隊(duì)列原理與用法實(shí)例詳解
- JS中的算法與數(shù)據(jù)結(jié)構(gòu)之隊(duì)列(Queue)實(shí)例詳解
- 基于JavaScript的數(shù)據(jù)結(jié)構(gòu)隊(duì)列動(dòng)畫實(shí)現(xiàn)示例解析
- Javascript數(shù)據(jù)結(jié)構(gòu)之棧和隊(duì)列詳解
- JavaScript隊(duì)列數(shù)據(jù)結(jié)構(gòu)詳解
相關(guān)文章
微信小程序頁(yè)面滑動(dòng)屏幕加載數(shù)據(jù)效果
這篇文章主要為大家詳細(xì)介紹了微信小程序頁(yè)面滑動(dòng)屏幕加載數(shù)據(jù)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08
如何用uni-app實(shí)現(xiàn)頂部導(dǎo)航欄顯示按鈕和搜索框
本文介紹了如何用uni-app實(shí)現(xiàn)頂部導(dǎo)航欄顯示按鈕和搜索框,感興趣的同學(xué),可以參考下,并且試驗(yàn)一下。2021-06-06
Bootstrap CSS組件之下拉菜單(dropdown)
這篇文章主要為大家詳細(xì)介紹了Bootstrap CSS組件之下拉菜單(dropdown),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12
js getBoundingClientRect使用方法詳解
這篇文章主要介紹了js getBoundingClientRect使用方法詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
JavaScript正則替換HTML標(biāo)簽功能示例
這篇文章主要介紹了JavaScript正則替換HTML標(biāo)簽功能,結(jié)合完整實(shí)例形式詳細(xì)分析了javascript正則替換字符串操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-03-03
JavaScript實(shí)現(xiàn)圖片放大鏡效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)圖片放大鏡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-06-06
BootstrapTable與KnockoutJS相結(jié)合實(shí)現(xiàn)增刪改查功能【二】
這篇文章主要介紹了BootstrapTable與KnockoutJS相結(jié)合實(shí)現(xiàn)增刪改查功能【二】的相關(guān)資料,非常具有參考價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-05-05

