小议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模拟C#中List的简单实例
Mar 06 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
Jun 05 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
Apr 29 Javascript
微信小程序动态的加载数据实例代码
Apr 14 Javascript
ES6新特性一: let和const命令详解
Apr 20 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
Dec 27 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
Apr 04 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
JavaScript实现世界各地时间显示
Sep 07 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
一个用php3编写的简单计数器
2006/10/09 PHP
PHP用身份证号获取星座和生肖的方法
2013/11/07 PHP
phpphp图片采集后按原路径保存图片示例
2014/02/18 PHP
PHP实现八皇后算法
2019/05/06 PHP
laravel中Redis队列监听中断的分析
2020/09/14 PHP
用js生产批量批处理执行命令
2008/07/28 Javascript
prototype Element学习笔记(篇二)
2008/10/26 Javascript
javascript fullscreen全屏实现代码
2009/04/09 Javascript
JS重要知识点小结
2011/11/06 Javascript
javascript向flash swf文件传递参数值注意细节
2012/12/11 Javascript
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
2015/05/25 Javascript
JavaScript常用字符串与数组扩展函数小结
2016/04/24 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
vue keep-alive请求数据的方法示例
2018/05/16 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
[01:02]DOTA2上海特锦赛SHOWOPEN
2016/03/25 DOTA
利用python画出折线图
2018/07/26 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
python创建学生成绩管理系统
2019/11/22 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
Python3 操作 MySQL 插入一条数据并返回主键 id的实例
2020/03/02 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
南京某公司笔试题
2013/01/27 面试题
青年教师培训方案
2014/02/06 职场文书
2014年医务科工作总结
2014/12/18 职场文书
行为规范主题班会
2015/08/13 职场文书
个人的事迹材料怎么写
2019/04/24 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server
如何搭建 MySQL 高可用高性能集群
2021/06/21 MySQL