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


Posted in Javascript onNovember 30, 2006

我们再来聊聊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)

Javascript 相关文章推荐
JS模板实现方法
Apr 03 Javascript
document.documentElement和document.body区别介绍
Sep 16 Javascript
ECMAScript中函数function类型
Jun 03 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
Jun 30 Javascript
Javascript编程之继承实例汇总
Nov 28 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
JavaScript动态检验密码强度的实现方法
Nov 09 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
原生JS上传大文件显示进度条 php上传文件代码
Mar 27 Javascript
Vue绑定用户接口实现代码示例
Nov 04 Javascript
小议Function.apply() 之一------(函数的劫持与对象的复制)
Nov 30 #Javascript
addRule在firefox下的兼容写法
Nov 30 #Javascript
跟随鼠标旋转的文字
Nov 30 #Javascript
推荐:极酷右键菜单
Nov 29 #Javascript
双击滚屏-常用推荐
Nov 29 #Javascript
js获取单选按钮的数据
Nov 27 #Javascript
准确获得页面、窗口高度及宽度的JS
Nov 26 #Javascript
You might like
PHP程序员最常犯的11个MySQL错误小结
2010/11/20 PHP
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
php获取当前时间的毫秒数的方法
2014/01/26 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
JS面向对象编程 for Cookie
2010/09/19 Javascript
JSONP跨域的原理解析及其实现介绍
2014/03/22 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
jquery 实现回车登录详解及实例代码
2016/10/23 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
vue组件横向树实现代码
2018/08/02 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
JavaScript 判断数据类型的4种方法
2020/09/11 Javascript
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
英国山地公路自行车商店:Tweeks Cycles
2018/03/16 全球购物
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
澳大利亚优质的家居用品和生活方式公司:Bed Bath N’ Table
2019/04/16 全球购物
戴森香港官方网站:Dyson香港
2021/02/11 全球购物
婚礼证婚人证婚词
2014/01/08 职场文书
法学个人求职信范文
2014/01/27 职场文书
2015年城管个人工作总结范文
2015/04/20 职场文书
学生检讨书怎么写
2015/05/07 职场文书
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript
对象析构函数__del__在Python中何时使用
2022/03/22 Python