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


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宝典学习笔记(上)
Jan 10 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
Aug 13 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
May 13 Javascript
在vue 中使用 less的教程详解
Sep 26 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 25 Javascript
Vue中img的src是动态渲染时不显示的解决
Nov 14 Javascript
Vue实现按钮级权限方案
Nov 21 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 Javascript
JS代码实现页面切换效果
Jan 10 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上传图片、删除图片实现代码
2010/05/12 PHP
php imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
php从给定url获取文件扩展名的方法
2015/03/14 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
JS Array对象入门分析
2008/10/30 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
2012/04/20 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
使用js实现数据格式化
2014/12/03 Javascript
javascript实现网页端解压并查看zip文件
2015/12/15 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
Vue列表页渲染优化详解
2017/07/24 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
2018/01/18 jQuery
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
[00:14]PWL:老朋友Mushi拍VLOG与中国玩家问好
2020/11/04 DOTA
详解Python中的strftime()方法的使用
2015/05/22 Python
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
使用python实现knn算法
2017/12/20 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
python代数式括号有效性检验示例代码
2020/10/04 Python
Django执行源生mysql语句实现过程解析
2020/11/12 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
CSS3动画特效在活动页中的应用
2020/01/21 HTML / CSS
联谊活动策划书
2014/01/26 职场文书
村官工作鉴定评语
2014/01/27 职场文书
招聘专员岗位职责
2014/03/07 职场文书
聘任书模板
2014/03/29 职场文书
欢度春节标语
2014/07/01 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
2014年预算员工作总结
2014/12/05 职场文书
react如何快速设置文件路径别名
2021/04/28 Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js