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


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 相关文章推荐
jQuery的学习步骤
Feb 23 Javascript
javascript中parentNode,childNodes,children的应用详解
Dec 17 Javascript
javascript操作excel生成报表示例
May 08 Javascript
node.js不得不说的12点内容
Jul 14 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
js修改onclick动作的四种方法(推荐)
Aug 18 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
Oct 27 Javascript
vux uploader 图片上传组件的安装使用方法
May 15 Javascript
利用es6 new.target来对模拟抽象类的方法
May 10 Javascript
localstorage实现带过期时间的缓存功能
Jun 28 Javascript
vue封装swiper代码实例解析
Oct 08 Javascript
jquery实现上传图片功能
Jun 29 jQuery
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
php类的定义与继承用法实例
2015/07/07 PHP
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
基于jQuery实现放大镜特效
2020/10/19 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
2019/03/11 Javascript
vue使用代理解决请求跨域问题详解
2019/07/24 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
跟老齐学Python之关于类的初步认识
2014/10/11 Python
完美解决Python2操作中文名文件乱码的问题
2017/01/04 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
python基础教程项目三之万能的XML
2018/04/02 Python
基于Python 装饰器装饰类中的方法实例
2018/04/21 Python
详解python 注释、变量、类型
2018/08/10 Python
python中map的基本用法示例
2018/09/10 Python
python实现矩阵打印
2019/03/02 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
Python实现时间序列可视化的方法
2019/08/06 Python
Python进程间通信 multiProcessing Queue队列实现详解
2019/09/23 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
Hotels.com中国区:好订网
2016/08/18 全球购物
南非领先的在线旅行社:Travelstart南非
2016/09/04 全球购物
英国浴室洗脸盆购物网站:Click Basin
2018/06/08 全球购物
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
荷兰最大的多品牌男装连锁店:Adam Brandstore
2019/12/31 全球购物
国际贸易专业推荐信
2013/11/15 职场文书
20岁生日感言
2014/01/13 职场文书
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
学术诚信承诺书
2014/05/26 职场文书
创业计划书之家教中心
2019/09/25 职场文书
Jsonp劫持学习
2021/04/01 PHP
Python包argparse模块常用方法
2021/06/04 Python