小议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 相关文章推荐
基于jQuery的获得各种控件Value的方法
Nov 19 Javascript
在JavaScript中构建ArrayList示例代码
Sep 17 Javascript
将数字转换成大写的人民币表达式的js函数
Sep 21 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
jquery实现的缩略图预览滑块实例
Jun 25 Javascript
JavaScript继承学习笔记【新手必看】
May 10 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
Dec 26 Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 Javascript
JavaScrpt的面向对象全面解析
May 09 Javascript
weex slider实现滑动底部导航功能
Aug 28 Javascript
使用Vue写一个datepicker的示例
Jan 27 Javascript
JavaScript变量Dom对象的所有属性
Apr 30 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通用分页类page.php[仿google分页]
2008/08/31 PHP
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
详解如何在云服务器上部署Laravel
2017/06/30 PHP
PHP简单实现防止SQL注入的方法
2018/03/13 PHP
TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结
2020/02/10 PHP
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
基于JQuery实现相同内容合并单元格的代码
2011/01/12 Javascript
游览器中javascript的执行过程(图文)
2012/05/20 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
2014/02/10 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
浅谈js中的in-for循环
2016/06/28 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
2017/03/30 Javascript
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
Angular实现svg和png图片下载实现
2019/05/05 Javascript
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
python登陆asp网站页面的实现代码
2015/01/14 Python
Python批量更改文件名的实现方法
2017/10/29 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
对python添加模块路径的三种方法总结
2018/10/16 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
html5 video标签屏蔽右键视频另存为的js代码
2013/11/12 HTML / CSS
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
纽约手袋品牌:KARA
2018/03/18 全球购物
硕士研究生求职自荐信范文
2014/03/11 职场文书
幼儿园中班区域活动总结
2014/07/09 职场文书
群众路线学习笔记范文
2014/11/06 职场文书
雷锋之歌观后感
2015/06/10 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
婚宴领导致辞
2015/07/28 职场文书
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL