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


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 相关文章推荐
js自定义方法通过隐藏iframe实现文件下载
Feb 21 Javascript
判断iframe里的页面是否加载完成
Jun 06 Javascript
JavaScript中扩展Array contains方法实例
Aug 23 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
Aug 22 Javascript
jquery带动画效果幻灯片特效代码
Aug 27 Javascript
xmlplus组件设计系列之树(Tree)(9)
May 02 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
谈谈vue中mixin的一点理解
Dec 12 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
微信小程序实现图片上传功能
May 28 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 Javascript
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
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+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
php自定义类fsocket模拟post或get请求的方法
2015/07/31 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
详解Yii实现分页的两种方法
2017/01/14 PHP
可选择和输入的下拉列表框示例
2013/11/05 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
简介JavaScript中的italics()方法的使用
2015/06/08 Javascript
ECMAScript6中Set/WeakSet详解
2015/06/12 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
vue中子组件的methods中获取到props中的值方法
2018/08/27 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
js页面加载后执行的几种方式小结
2020/01/30 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
vue实现打地鼠小游戏
2020/08/21 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
2020/09/01 Javascript
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
python脚本设置系统时间的两种方法
2016/02/21 Python
Python爬豆瓣电影实例
2018/02/23 Python
python3连接MySQL数据库实例详解
2018/05/24 Python
元组列表字典(莫烦python基础)
2019/04/03 Python
python中bytes和str类型的区别
2019/10/21 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
canvas实现手机的手势解锁的步骤详细
2020/03/16 HTML / CSS
介绍一下Java中的Class类
2015/04/10 面试题
心理健康教育制度
2014/01/27 职场文书
军训自我鉴定100字
2014/02/13 职场文书
仓库规划计划书
2014/04/28 职场文书
关于安全的标语
2014/06/10 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书
python Polars库的使用简介
2021/04/21 Python
Pandas 数据编码的十种方法
2022/04/20 Python