小议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 相关文章推荐
javascript 字符 Escape,encodeURI,encodeURIComponent
Jul 09 Javascript
jQuery 添加/移除CSS类实现代码
Feb 11 Javascript
javascript Firefox与IE 替换节点的方法
Feb 24 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
Jan 17 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
浅析JavaScript中的类型和对象
Nov 29 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
May 13 Javascript
jQuery实用函数用法总结
Aug 29 Javascript
Node.js抓取中文网页乱码问题和解决方法
Feb 10 Javascript
JavaScript表单即时验证 验证不成功不能提交
Aug 31 Javascript
原生JavaScrpit中异步请求Ajax实现方法
Nov 03 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 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 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
php中实现简单的ACL 完结篇
2011/09/07 PHP
php处理json格式数据经典案例总结
2016/05/19 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
javascript getElementsByName()的用法说明
2009/07/31 Javascript
统计jQuery中各字符串出现次数的工具
2012/05/03 Javascript
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
jQuery弹性滑动导航菜单实现思路及代码
2013/05/02 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
jQuery+koa2实现简单的Ajax请求的示例
2018/03/06 jQuery
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
2018/09/11 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
django执行数据库查询之后实现返回的结果集转json
2020/03/31 Python
Python3 webservice接口测试代码详解
2020/06/23 Python
windows支持哪个版本的python
2020/07/03 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
中国第一家杂志折扣订阅网:杂志铺
2016/08/30 全球购物
BIFFI美国站:意大利BIFFI BOUTIQUES豪华多品牌时装零售公司
2020/02/11 全球购物
美国轻奢时尚购物网站:REVOLVE(支持中文)
2020/07/18 全球购物
VLAN和VPN有什么区别?分别实现在OSI的第几层?
2014/12/23 面试题
车间调度岗位职责
2013/11/30 职场文书
致200米运动员广播稿
2014/02/06 职场文书
挖掘机司机岗位职责
2014/02/12 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
运动会加油稿100字
2014/09/19 职场文书
公司离职证明标准格式
2014/11/18 职场文书
2019年“我为祖国点赞”演讲稿(3篇)
2019/09/26 职场文书
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript