小議Function.apply()之二------利用Apply的參數(shù)數(shù)組化來(lái)提高 JavaScript程序性能
我們?cè)賮?lái)聊聊Function.apply() 在提升程序性能方面的技巧。
我們先從 Math.max() 函數(shù)說(shuō)起， Math.max后面可以接任意個(gè)參數(shù)，最后返回所有參數(shù)中的最大值。
比如
alert(Math.max(5,8)) //8
alert(Math.max(5,7,9,3,1,6)) //9
但是在很多情況下，我們需要找出數(shù)組中最大的元素。
var arr=[5,7,9,1]
alert(Math.max(arr)) // 這樣卻是不行的。一定要這樣寫
function getMax(arr){
var arrLen=arr.length;
for(var i=0,ret=arr[0];i<arrLen;i++){
ret=Math.max(ret,arr[i]);
}
return ret;
}
這樣寫麻煩而且低效。如果用 apply呢，看代碼：
function getMax2(arr){
return Math.max.apply(null,arr)
}
兩段代碼達(dá)到了同樣的目的，但是getMax2卻優(yōu)雅，高效，簡(jiǎn)潔得多。
看性能測(cè)試:
getMax性能測(cè)試
<script>
var myArr=new Array()
function fillRnd(arrLen){ //填入 arrLen個(gè)1-10的隨機(jī)數(shù)字到數(shù)組
for(var i=0,arr=[];i<arrLen;i++){
arr[i]=Math.ceil(Math.random()*10)
}
return arr
}
function getMax(arr){
var arrLen=arr.length;
for(var i=0,ret=arr[0];i<arrLen;i++){
ret=Math.max(ret,arr[i]);
}
return ret;
}
function getMax2(arr){
return Math.max.apply(null,arr)
}
myArr=fillRnd(20*10000) //生成20萬(wàn)個(gè)隨機(jī)數(shù)填到數(shù)組
var t1=new Date()
var max1=getMax(myArr)
var t2=new Date()
var max2=getMax2(myArr)
var t3=new Date()
if (max1!==max2) alert("error")
alert([t3-t2,t2-t1]) //在我機(jī)器上 96,464 .不同的機(jī)器,結(jié)果可能有差異
</script>
通過(guò)20萬(wàn)個(gè)數(shù)據(jù)的比較， getMax2 時(shí)間為 96ms 而 getmax時(shí)間為464。 兩者相差5倍
再比如數(shù)組的push方法。
var arr1=[1,3,4];
var arr2=[3,4,5];
如果我們要把 arr2展開，然后一個(gè)一個(gè)追加到 arr1中去，最后讓 arr1=[1,3,4,3,4,5]
arr1.push(arr2) 顯然是不行的。 因?yàn)檫@樣做會(huì)得到 [1,3,4, [3,4,5] ]
我們只能用一個(gè)循環(huán)去一個(gè)一個(gè)的push (當(dāng)然也可以用 arr1.concat(arr2) 但是concat方法并不改變 arr1本身)
var arrLen=arr2.length
for(var i=0;i<arrLen;i++){
arr1.push(arr2[i])
}
自從有了 Apply ,事情就變得如此簡(jiǎn)單
Array.prototype.push.apply(arr1,arr2)
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Openlayers顯示瓦片網(wǎng)格信息，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
JavaScript將字符串轉(zhuǎn)換成字符編碼列表的方法
這篇文章主要介紹了JavaScript將字符串轉(zhuǎn)換成字符編碼列表的方法,實(shí)例分析了javascript中charCodeAt函數(shù)的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
微信小程序視圖容器(swiper)組件創(chuàng)建輪播圖
這篇文章主要為大家詳細(xì)介紹了微信小程序視圖容器（swiper）組件創(chuàng)建輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
Webpack對(duì)js處理是有限的,只能編譯js中ES模塊化語(yǔ)法,不能編譯其他語(yǔ)法,導(dǎo)致js不能在IE等瀏覽器運(yùn)行,本文主要介紹了Webpack處理js資源,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
這篇文章主要為大家詳細(xì)介紹了js代碼實(shí)現(xiàn)輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
本文主要介紹了js模擬微博發(fā)布消息的實(shí)例，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
采用CSS覆蓋的方法就可以了，但是官方是不允許這么做的，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下2013-09-09
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)拖拽功能,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
移動(dòng)端H5喚起APP的寫法實(shí)例（IOS、android）
最近在做掃碼之后的h5頁(yè)面喚醒App的功能,所以記錄一下,這篇文章主要給大家介紹了關(guān)于移動(dòng)端H5喚起APP的相關(guān)資料,需要的朋友可以參考下2021-07-07
JSON.stringify實(shí)例詳解以及靈活運(yùn)用
在向服務(wù)器發(fā)送數(shù)據(jù)時(shí)一般是字符串,我們可以使用?JSON.stringify()方法將JavaScript對(duì)象轉(zhuǎn)換為字符串,下面這篇文章主要給大家介紹了關(guān)于JSON.stringify及靈活運(yùn)用的相關(guān)資料,需要的朋友可以參考下2022-03-03