小议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 相关文章推荐
提高代码性能技巧谈—以创建千行表格为例
Jul 01 Javascript
用 JSON 处理缓存
Apr 27 Javascript
JavaScript中prototype为对象添加属性的误区介绍
Oct 15 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
Aug 05 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
js鼠标移动时禁止选中文字
Feb 19 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
May 08 Javascript
Angular6笔记之封装http的示例代码
Jul 27 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
JS实现马赛克图片效果完整示例
Apr 13 Javascript
vue路由 遍历生成复数router-link的例子
Oct 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 进度条实现代码
2009/03/10 PHP
php strlen mb_strlen计算中英文混排字符串长度
2009/07/10 PHP
基于PHP中的常用函数回顾
2013/07/11 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
PHP面向对象程序设计之构造方法和析构方法详解
2019/06/13 PHP
JavaScript 字符编码规则
2009/05/04 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
纯文字版返回顶端的js代码
2013/08/01 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
基于构造函数的五种继承方法小结
2017/07/27 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
python定时采集摄像头图像上传ftp服务器功能实现
2013/12/23 Python
python基础教程之lambda表达式使用方法
2014/02/12 Python
python代码制作configure文件示例
2014/07/28 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
Python实现对adb命令封装
2020/03/06 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
自我介绍演讲稿
2014/01/15 职场文书
2014年创卫实施方案
2014/02/18 职场文书
统计专业自荐书
2014/07/06 职场文书
三关爱志愿服务活动方案
2014/08/17 职场文书
幼儿园见习总结
2015/06/23 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书
Linux中如何安装并部署Redis
2022/04/18 Servers