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


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 相关文章推荐
javascript 动态参数判空操作
Dec 22 Javascript
JS弹出对话框返回值代码(asp.net后台)
Dec 28 Javascript
JavaScript中对象property的读取和写入方法介绍
Dec 30 Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 Javascript
详解JS对象封装的常用方式
Dec 30 Javascript
妙用Angularjs实现表格按指定列排序
Jun 23 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
vue项目中用cdn优化的方法
Jan 03 Javascript
node.js实现微信开发之获取用户授权
Mar 18 Javascript
el-select 下拉框多选实现全选的实现
Aug 02 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 28 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
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
PHP循环获取GET和POST值的代码
2008/04/09 PHP
PHP游戏编程25个脚本代码
2011/02/08 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
基于jquery的表头固定的若干方法
2011/01/27 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
2011/07/27 Javascript
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
中止javascript执行的方法
2014/02/14 Javascript
JS显示表格内指定行html代码的方法
2015/03/31 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
详解Javacript和AngularJS中的Promises
2016/02/09 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
2018/02/06 Javascript
koa中间件核心(koa-compose)源码解读分析
2020/06/15 Javascript
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
Python深入学习之闭包
2014/08/31 Python
python里大整数相乘相关技巧指南
2014/09/12 Python
Python类的用法实例浅析
2015/05/27 Python
python实现折半查找和归并排序算法
2017/04/14 Python
python 网络编程详解及简单实例
2017/04/25 Python
python版本单链表实现代码
2018/09/28 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
python不同版本的_new_不同点总结
2020/12/09 Python
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
2014年父亲节活动方案
2014/03/06 职场文书
2014年个人总结范文
2015/03/09 职场文书
朋友聚会开场白
2015/06/01 职场文书
如何拟写通知正文?
2019/04/02 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书
pytorch Dropout过拟合的操作
2021/05/27 Python
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript
优化Mysql查询的示例
2022/04/26 MySQL