小议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 应用代码 方便的排序功能
Feb 06 Javascript
浏览器打开层自动缓慢展开收缩实例代码
Jul 04 Javascript
React Native实现简单的登录功能(推荐)
Sep 19 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
Oct 11 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
Jan 19 Javascript
vue登录路由验证的实现
Dec 13 Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
基于vue实现可搜索下拉框定制组件
Mar 26 Javascript
浅谈微信小程序flex布局基础
Sep 10 Javascript
JS加载解析Markdown文档过程详解
May 19 Javascript
JavaScript 绘制饼图的示例
Feb 19 Javascript
vue3.0中使用element的完整步骤
Mar 04 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模板类代码
2008/09/07 PHP
php基于session实现数据库交互的类实例
2015/08/03 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
动态获取复选框checkbox选中个数的jquery代码
2013/06/25 Javascript
遍历DOM对象内的元素属性示例代码
2014/02/08 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
浅谈jQuery效果函数
2016/09/16 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
vue-router 权限控制的示例代码
2017/09/21 Javascript
layui导出所有数据的例子
2019/09/10 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
Python使用win32com实现的模拟浏览器功能示例
2017/07/13 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
一些Centos Python 生产环境的部署命令(推荐)
2018/05/07 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
Python高并发和多线程有什么关系
2020/11/14 Python
印尼在线精品店:Berrybenka.com
2016/10/22 全球购物
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
Blank NYC官网:夹克、牛仔裤等
2020/12/16 全球购物
空指针到底是什么
2012/08/07 面试题
英文简历中的自我评价
2013/10/06 职场文书
学生党员检讨书范文
2014/12/27 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书