小议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 调用本地exe的例子(支持IE内核的浏览器)
Dec 26 Javascript
javascript打印html内容功能的方法示例
Nov 28 Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
Jan 25 Javascript
Markdown+Bootstrap图片自适应属性详解
May 21 Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 Javascript
BootStrapTable服务器分页实例解析
Dec 20 Javascript
JS百度地图搜索悬浮窗功能
Jan 12 Javascript
vue2中的keep-alive使用总结及注意事项
Dec 21 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
Apr 03 Javascript
Ajax请求时无法重定向的问题解决代码详解
Jun 21 Javascript
javascript实现抢购倒计时程序
Aug 26 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
JavaScript 字符串处理函数使用小结
2010/12/02 Javascript
js将字符串转成正则表达式的实现方法
2013/11/13 Javascript
深入理解JQuery keyUp和keyDown的区别
2013/12/12 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
JavaScript获取当前url根目录(路径)
2016/06/17 Javascript
jQuery使用deferreds串行多个ajax请求
2016/08/22 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
Angularjs添加排序查询功能的实例代码
2017/10/24 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
从组件封装看Vue的作用域插槽的实现
2019/02/12 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
2019/11/04 Javascript
在博客园博文中添加自定义右键菜单的方法详解
2020/02/05 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
2020/11/06 Javascript
[46:43]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第三局
2016/02/28 DOTA
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
Python的Urllib库的基本使用教程
2015/04/30 Python
使用Python实现博客上进行自动翻页
2017/08/23 Python
基于python select.select模块通信的实例讲解
2017/09/21 Python
python获取url的返回信息方法
2018/12/17 Python
10个python3常用排序算法详细说明与实例(快速排序,冒泡排序,桶排序,基数排序,堆排序,希尔排序,归并排序,计数排序)
2020/03/17 Python
Python文件时间操作步骤代码详解
2020/04/13 Python
Python如何实现远程方法调用
2020/08/07 Python
python中温度单位转换的实例方法
2020/12/27 Python
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
编辑求职信样本
2013/12/16 职场文书
应届生如何写自荐信
2014/01/05 职场文书
CAD实训总结范文
2015/08/03 职场文书
英语教学课后反思
2016/02/15 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书
vue中div禁止点击事件的实现
2022/04/02 Vue.js