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


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通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
利用JavaScript脚本实现滚屏效果的方法
Jul 07 Javascript
javascript实现不同颜色Tab标签切换效果
Apr 27 Javascript
Easyui 之 Treegrid 笔记
Apr 29 Javascript
浅谈js中字符和数组一些基本算法题
Aug 15 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
JavaScript生成.xls文件的代码
Dec 22 Javascript
angular实现form验证实例代码
Jan 17 Javascript
jQuery设计思想
Mar 07 Javascript
详解vuejs之v-for列表渲染
Jun 22 Javascript
vue实现选项卡及选项卡切换效果
Apr 24 Javascript
Vue多环境代理配置方法思路详解
Jun 21 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网页游戏学习之Xnova(ogame)源码解读(四)
2014/06/23 PHP
php实现的操作excel类详解
2016/01/15 PHP
jQuery之选择组件的深入解析
2013/06/19 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
jquery中的$(document).ready()使用小结
2014/02/14 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
最基础的vue.js双向绑定操作
2017/08/23 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
JS原型对象操作实例分析
2020/06/06 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
[01:05:24]Ti4 冒泡赛第二天 iG vs NEWBEE 3
2014/07/15 DOTA
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
[01:15:16]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第一场 1月26日
2021/03/11 DOTA
Python中使用socket发送HTTP请求数据接收不完整问题解决方法
2015/02/04 Python
python实现人民币大写转换
2018/06/20 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
pandas中ix的使用详细讲解
2020/03/09 Python
python中的unittest框架实例详解
2021/02/05 Python
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
.net面试题
2015/12/22 面试题
讲座主持词
2014/03/20 职场文书
专题民主生活会对照检查材料思想汇报
2014/09/29 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
大学生受助感言
2015/08/01 职场文书
大学生安全教育主题班会
2015/08/12 职场文书
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL
spring boot实现文件上传
2022/08/14 Java/Android
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript