将函数的实际参数转换成数组的方法


Posted in Javascript onJanuary 25, 2010

值得庆幸的是,我们可以通过数组的 slice 方法将 arguments 对象转换成真正的数组:
var args = Array.prototype.slice.call(arguments);
对于slice 方法,ECMAScript 262 中 15.4.4.10 Array.prototype.slice (start, end) 章节有备注:

The slice function is intentionally generic; it does not require that its this value be an Array object. Therefore it can be transferred to other kinds of objects for use as a method. Whether the slice function can be applied successfully to a host object is implementation-dependent.

《Pro JavaScript Design Patterns》(《JavaScript 设计模式》)的作者 Dustin Diaz 曾指出:

instead of… 
var args = Array.prototype.slice.call(arguments); // 怿飞注:下称方法一 
do this… 
var args = [].slice.call(arguments, 0); // 怿飞注:下称方法二

但二者的性能差异真的存在吗?经过个人简单测试发现:

在 arguments.length 较小的时候,方法二性能上稍有一点点优势,而在arguments.length 较大的时候,方法一却又稍有优势。

最后附上方法三,最老土的方式:

var args = []; 
for (var i = 1; i < arguments.length; i++) { 
args.push(arguments[i]); 
}

不过对于平常来说,个人建议还是使用第二种方法,但任何解决方案,没有最好的,只有最合适:
var args = [].slice.call(arguments, 0); 
理由有二:

一般的函数的 arguments.length 都在 10 以内,方法二有优势;
方法二的代码量上也比第一种少,至少可以减小一点字节 ^^

如何将 NodeList (比如:document.getElementsByTagName('div'))转换成数组呢?

解决方案简单如下:

function nodeListToArray(nodes){ 
var arr, length; 
try { 
// works in every browser except IE 
arr = [].slice.call(nodes); 
return arr; 
} catch(err){ 
// slower, but works in IE 
arr = []; 
length = nodes.length; 
for(var i = 0; i < length; i++){ 
arr.push(nodes[i]); 
} 
return arr; 
} 
}

为什么 IE 中 NodeList 不可以使用 [].slice.call(nodes) 方法转换呢?
In Internet Explorer it throws an error that it can't run Array.prototype.slice.call(nodes) because a DOM NodeList is not a JavaScript object.
Javascript 相关文章推荐
JavaScript 解析Json字符串的性能比较分析代码
Dec 16 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
javascript模块化是什么及其优缺点介绍
Sep 02 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
Apr 14 Javascript
学习Bootstrap滚动监听 附调用方法
Jul 02 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
Aug 25 Javascript
js自制图片放大镜功能
Jan 24 Javascript
js实现放大镜特效
May 18 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 Javascript
vue实现简单瀑布流布局
May 28 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 Javascript
Js类的构建与继承案例详解
Sep 15 Javascript
javascript中利用数组实现的循环队列代码
Jan 24 #Javascript
document.getElementById为空或不是对象的解决方法
Jan 24 #Javascript
JavaScript 未结束的字符串常量常见解决方法
Jan 24 #Javascript
php gethostbyname获取域名ip地址函数详解
Jan 24 #Javascript
setTimeout与setInterval在不同浏览器下的差异
Jan 24 #Javascript
js 模拟实现类似c#下的hashtable的简单功能代码
Jan 24 #Javascript
jQuery 1.4 15个你应该知道的新特性(译)
Jan 24 #Javascript
You might like
PHP4.04简明安装
2006/10/09 PHP
轻松修复Discuz!数据库
2008/05/03 PHP
php截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2014/06/10 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
JS表的模拟方法
2015/02/05 Javascript
javascript html5移动端轻松实现文件上传
2020/03/27 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀
2014/06/20 DOTA
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
pandas计数 value_counts()的使用
2019/06/24 Python
python实现按行分割文件
2019/07/22 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
如何用python处理excel表格
2020/06/09 Python
Django-simple-captcha验证码包使用方法详解
2020/11/28 Python
浅析Python模块之间的相互引用问题
2021/02/26 Python
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
什么是Smarty变量操作符?如何使用Smarty变量操作符
2014/07/18 面试题
2014年计算机专业个人自我评价
2014/01/19 职场文书
2014年情人节活动方案
2014/02/16 职场文书
新闻编辑专业自荐信
2014/07/02 职场文书
超市七夕促销活动方案
2014/08/28 职场文书
远程培训的心得体会
2014/09/01 职场文书
食品安全主题班会
2015/08/13 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书