小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能

 更新时间:2006年11月30日 00:00:00   作者:  

我们再来聊聊Function.apply() 在提升程序性能方面的技巧。

我们先从 Math.max() 函数说起,  Math.max后面可以接任意个参数,最后返回所有参数中的最大值。

比如 
alert(Math.max(5,8))   //8
alert(Math.max(5,7,9,3,1,6))   //9

但是在很多情况下,我们需要找出数组中最大的元素。
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)
}
两段代码达到了同样的目的,但是getMax2却优雅,高效,简洁得多。

看性能测试:
getMax性能测试

<script>
var myArr=new Array()

function fillRnd(arrLen){  //填入 arrLen个1-10的随机数字到数组
    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万个随机数填到数组

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])   //在我机器上 96,464 .不同的机器,结果可能有差异

</script>


通过20万个数据的比较, getMax2 时间为 96ms 而 getmax时间为464。 两者相差5倍


 再比如数组的push方法。
var arr1=[1,3,4];
var arr2=[3,4,5];
如果我们要把 arr2展开,然后一个一个追加到 arr1中去,最后让  arr1=[1,3,4,3,4,5]
arr1.push(arr2)  显然是不行的。 因为这样做会得到  [1,3,4, [3,4,5] ]

我们只能用一个循环去一个一个的push   (当然也可以用 arr1.concat(arr2) 但是concat方法并不改变 arr1本身)
var arrLen=arr2.length
for(var i=0;i<arrLen;i++){
    arr1.push(arr2[i])
}

自从有了 Apply    ,事情就变得如此简单

Array.prototype.push.apply(arr1,arr2)

相关文章

  • Openlayers显示瓦片网格信息的方法

    Openlayers显示瓦片网格信息的方法

    这篇文章主要为大家详细介绍了Openlayers显示瓦片网格信息,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • JavaScript将字符串转换成字符编码列表的方法

    JavaScript将字符串转换成字符编码列表的方法

    这篇文章主要介绍了JavaScript将字符串转换成字符编码列表的方法,实例分析了javascript中charCodeAt函数的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • 微信小程序视图容器(swiper)组件创建轮播图

    微信小程序视图容器(swiper)组件创建轮播图

    这篇文章主要为大家详细介绍了微信小程序视图容器(swiper)组件创建轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • Webpack处理js资源(Eslint、Babel)

    Webpack处理js资源(Eslint、Babel)

    Webpack对js处理是有限的,只能编译js中ES模块化语法,不能编译其他语法,导致js不能在IE等浏览器运行,本文主要介绍了Webpack处理js资源,具有一定的参考价值,感兴趣的可以了解一下
    2023-12-12
  • js代码实现轮播图

    js代码实现轮播图

    这篇文章主要为大家详细介绍了js代码实现轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • js模拟微博发布消息

    js模拟微博发布消息

    本文主要介绍了js模拟微博发布消息的实例,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • JS中引用百度地图并将百度地图的logo和信息去掉

    JS中引用百度地图并将百度地图的logo和信息去掉

    采用CSS覆盖的方法就可以了,但是官方是不允许这么做的,具体实现如下,感兴趣的朋友可以参考下
    2013-09-09
  • js拖拽功能实现代码解析

    js拖拽功能实现代码解析

    这篇文章主要为大家详细介绍了js实现拖拽功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • 移动端H5唤起APP的写法实例(IOS、android)

    移动端H5唤起APP的写法实例(IOS、android)

    最近在做扫码之后的h5页面唤醒App的功能,所以记录一下,这篇文章主要给大家介绍了关于移动端H5唤起APP的相关资料,需要的朋友可以参考下
    2021-07-07
  • JSON.stringify实例详解以及灵活运用

    JSON.stringify实例详解以及灵活运用

    在向服务器发送数据时一般是字符串,我们可以使用 JSON.stringify()方法将JavaScript对象转换为字符串,下面这篇文章主要给大家介绍了关于JSON.stringify及灵活运用的相关资料,需要的朋友可以参考下
    2022-03-03

最新评论