Array的push與unshift方法性能比較分析
更新時(shí)間：2011年03月05日 13:58:18 作者：
Array的push與unshift方法都能給當(dāng)前數(shù)組添加元素，不同的是，push是在末尾添加，而unshift則是在開頭添加。
從原理就可以知道，unshift的效率是較低的。原因是，它每添加一個(gè)元素，都要把現(xiàn)有元素往下移一個(gè)位置。但到底效率差異有多大呢？下面來測(cè)試一下。
測(cè)試環(huán)境的主要硬件：CPU T7100（1.8G）；內(nèi)存4G DDR2 667；硬盤5400轉(zhuǎn)。主要軟件：操作系統(tǒng)為Windows 7；瀏覽器為Firefox 3.6.9。測(cè)試代碼：
var arr = [ ], s = +new Date;
// push性能測(cè)試
for (var i = 0; i < 50000; i++) {
arr.push(i);
}
console.log(+new Date - s);
s = +new Date;
arr = [ ];
// unshift性能測(cè)試
for (var i = 0; i < 50000; i++) {
arr.unshift(i);
}
console.log(+new Date - s);
這段代碼分別執(zhí)行了50000次push和unshift操作，運(yùn)行一次以后，得出結(jié)果：
12
1152
可見，unshift比push要慢差不多100倍！因此，平時(shí)還是要慎用unshift，特別是對(duì)大數(shù)組。那如果一定要達(dá)到unshift的效果，有沒有其他方法呢？答案是肯定的。
Array有一個(gè)叫做reverse的方法，能夠把一個(gè)數(shù)組反轉(zhuǎn)。先把要放進(jìn)數(shù)組的元素用push添加，再執(zhí)行一次reverse，就達(dá)到了unshift的效果。比如：
for (var i = 0; i < 50000; i++) {
arr.push(i);
}
arr.reverse();
reverse的性能又如何呢，下面再來測(cè)試：
var arr = [ ], s = +new Date;
for (var i = 0; i < 50000; i++) {
arr.push(i);
}
arr.reverse();
console.log(+new Date - s);
結(jié)果是：
12
可見，reverse性能極高，甚至于沒有額外的消耗，可以放心使用。
測(cè)試環(huán)境的主要硬件：CPU T7100（1.8G）；內(nèi)存4G DDR2 667；硬盤5400轉(zhuǎn)。主要軟件：操作系統(tǒng)為Windows 7；瀏覽器為Firefox 3.6.9。測(cè)試代碼：
復(fù)制代碼 代碼如下:
var arr = [ ], s = +new Date;
// push性能測(cè)試
for (var i = 0; i < 50000; i++) {
arr.push(i);
}
console.log(+new Date - s);
s = +new Date;
arr = [ ];
// unshift性能測(cè)試
for (var i = 0; i < 50000; i++) {
arr.unshift(i);
}
console.log(+new Date - s);
這段代碼分別執(zhí)行了50000次push和unshift操作，運(yùn)行一次以后，得出結(jié)果：
12
1152
可見，unshift比push要慢差不多100倍！因此，平時(shí)還是要慎用unshift，特別是對(duì)大數(shù)組。那如果一定要達(dá)到unshift的效果，有沒有其他方法呢？答案是肯定的。
Array有一個(gè)叫做reverse的方法，能夠把一個(gè)數(shù)組反轉(zhuǎn)。先把要放進(jìn)數(shù)組的元素用push添加，再執(zhí)行一次reverse，就達(dá)到了unshift的效果。比如：
復(fù)制代碼 代碼如下:
for (var i = 0; i < 50000; i++) {
arr.push(i);
}
arr.reverse();
reverse的性能又如何呢，下面再來測(cè)試：
復(fù)制代碼 代碼如下:
var arr = [ ], s = +new Date;
for (var i = 0; i < 50000; i++) {
arr.push(i);
}
arr.reverse();
console.log(+new Date - s);
結(jié)果是：
12
可見，reverse性能極高，甚至于沒有額外的消耗，可以放心使用。
相關(guān)文章
在ElementPlusUI組件庫中,mt-x類用于設(shè)置元素的外邊距,其中"mt"代表"margin-top",x表示外邊距的大小,這種類名的使用可以快速調(diào)整元素的頂部外邊距,簡(jiǎn)化樣式管理,確保設(shè)計(jì)的一致性,本文給大家介紹Element Plus UI 組件庫中 mt-x 類基本知識(shí),感興趣的朋友一起看看吧2024-11-11
javascript設(shè)計(jì)模式 封裝和信息隱藏（上）
今天博文關(guān)注的是javascript中的封裝，文章內(nèi)容來自《pro javascript design patterns》（有興趣的朋友可以直接去下）和自己對(duì)這一問題的理解2012-07-07
JS小數(shù)運(yùn)算出現(xiàn)多為小數(shù)問題的解決方法
這篇文章主要介紹了JS小數(shù)運(yùn)算出現(xiàn)多為小數(shù)問題的解決方法,需要的朋友可以參考下2016-06-06
今天在項(xiàng)目碰到一個(gè)問題，之前在項(xiàng)目首頁實(shí)現(xiàn)單列表的顯示和隱藏，通過wx:if判斷就可實(shí)現(xiàn)，現(xiàn)在要實(shí)現(xiàn)多列表的單項(xiàng)顯示和隱藏功能應(yīng)該如何實(shí)現(xiàn)呢？下面小編給大家?guī)砹宋⑿判〕绦蛑嗔斜淼娘@示和隱藏功能，感興趣的朋友一起看看吧2018-08-08
今天小編就為大家分享一篇layui的table單擊行勾選checkbox功能方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
JavaScript 中問號(hào)的三種用法 ??和?.以及?:
本文主要介紹了JavaScript 中問號(hào)的三種用法 ??和?.以及?: ,分別是空值合并操作符、可選鏈操作符和三目運(yùn)算,具有一定的參考價(jià)值,感興趣的可以了解一下2025-04-04
JavaScript 中的 Object 是一種非常靈活且強(qiáng)大的數(shù)據(jù)類型,它允許我們創(chuàng)建和操作鍵值對(duì),在本文中,我們將深入探討 Object 的一些重要屬性,以便更好地理解和利用這個(gè)關(guān)鍵的數(shù)據(jù)結(jié)構(gòu),需要的朋友可以參考下2023-11-11
使用ionic(選項(xiàng)卡欄tab) icon(圖標(biāo)) ionic上拉菜單(ActionSheet) 實(shí)現(xiàn)通訊錄界面切換實(shí)例
這篇文章主要介紹了使用ionic(選項(xiàng)卡欄tab) icon(圖標(biāo)) ionic上拉菜單(ActionSheet) 實(shí)現(xiàn)通訊錄界面切換實(shí)例代碼,需要的朋友可以參考下2017-10-10
利用原生JS自動(dòng)生成文章標(biāo)題樹的實(shí)例
網(wǎng)上關(guān)于生成文章標(biāo)題樹的示例很多，這篇文章介紹的是利用原生JS實(shí)現(xiàn)自動(dòng)生成文章標(biāo)題樹，實(shí)現(xiàn)過程很簡(jiǎn)單，有需要的可以參考借鑒。2016-08-08
JavaScript中的所有事物都是對(duì)象，本文為大家介紹下JS中創(chuàng)建對(duì)象的幾種方式，如原始方法、工廠方法等等2014-01-01