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


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 相关文章推荐
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 Javascript
js的onload事件及初始化按钮事件示例代码
Sep 25 Javascript
JavaScript中判断函数、变量是否存在
Jun 10 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
原生javascript实现图片无缝滚动效果
Feb 12 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 Javascript
老生常谈ES6中的类
Jul 31 Javascript
动态统计当前输入内容的字节、字符数的实例详解
Oct 27 Javascript
vue.js移动数组位置,同时更新视图的方法
Mar 08 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 Javascript
js实现表格数据搜索
Aug 09 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
如何在PHP中使用Oracle数据库(6)
2006/10/09 PHP
如何使用脚本模仿登陆过程
2006/11/22 PHP
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
php中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
PHP 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
解析:使用php mongodb扩展时 需要注意的事项
2013/06/18 PHP
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
9条PHP编程小知识及易犯的小错误
2015/01/22 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
JavaScript NaN和Infinity特殊值 [译]
2012/09/20 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
2013/03/18 Javascript
jQuery基于当前元素进行下一步的遍历
2014/05/20 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
input输入框内容实时监测(附代码)
2017/08/15 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
2020/01/08 Javascript
Vue3为什么这么快
2020/09/23 Javascript
Python 不同对象比较大小示例探讨
2014/08/21 Python
Python中类的继承代码实例
2014/10/28 Python
详解python之简单主机批量管理工具
2017/01/27 Python
基于python中的TCP及UDP(详解)
2017/11/06 Python
微信跳一跳游戏python脚本
2020/04/01 Python
pyqt5 QProgressBar清空进度条的实例
2019/06/21 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
车辆维修工自我评价怎么写
2013/09/20 职场文书
总经理司机岗位职责
2014/02/06 职场文书
助人为乐模范事迹材料
2014/06/02 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书