小议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 相关文章推荐
在textarea文本域中显示HTML代码的方法
Mar 06 Javascript
5秒后跳转到另一个页面的js代码
Oct 12 Javascript
JavaScript面对国际化编程时的一些建议
Jun 24 Javascript
bootstrap模态框远程示例代码分享
May 22 Javascript
bootstrap日期插件daterangepicker使用详解
Oct 19 Javascript
Vue DevTools调试工具的使用
Dec 05 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
Feb 10 Javascript
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
Vue实现自定义下拉菜单功能
Jul 16 Javascript
layui弹出框Tab选项卡的示例代码
Sep 04 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 Javascript
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
小议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检测用户是否用手机(Mobile)访问网站的类
2014/01/09 PHP
PHP中session变量的销毁
2014/02/27 PHP
php调用google接口生成二维码示例
2014/04/28 PHP
php编写的一个E-mail验证类
2015/03/25 PHP
PHP中Array相关函数简介
2016/07/03 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
学习YUI.Ext第五日--做拖放Darg&amp;Drop
2007/03/10 Javascript
类之Prototype.js学习
2007/06/13 Javascript
List all the Databases on a SQL Server
2007/06/21 Javascript
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
2010/06/07 Javascript
jQuery提交多个表单的小例子
2013/06/30 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
wx-charts 微信小程序图表插件的具体使用
2019/08/18 Javascript
vue.js click点击事件获取当前元素对象的操作
2020/08/07 Javascript
微信小程序抽奖组件的使用步骤
2021/01/11 Javascript
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
itchat接口使用示例
2017/10/23 Python
Sanic框架路由用法实例分析
2018/07/16 Python
django如何连接已存在数据的数据库
2018/08/14 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
Python中用xlwt制作表格实例讲解
2020/11/05 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
英国马匹装备和马术用品购物网站:Equine Superstore
2019/03/03 全球购物
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物
应届毕业生简历自我评价
2014/01/31 职场文书
欢迎横幅标语
2014/06/17 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
看古人们是如何赞美老师的?
2019/07/08 职场文书