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


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 ECMA-262-3 深入解析.第三章.this
Sep 28 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
使用Java实现简单的server/client回显功能的方法介绍
May 03 Javascript
href下载文件根据id取url并下载
May 28 Javascript
分享十五款 jQuery 社交网络分享插件
May 16 Javascript
JS延时提示框实现方法详解
Nov 26 Javascript
Express的路由详解
Dec 10 Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 Javascript
浅谈vue 单文件探索
Sep 05 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 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实现微信摇一摇周边红包
2016/01/04 PHP
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
javascript引用对象的方法代码
2007/08/13 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
[06:36]吞吞映像top1
2014/06/20 DOTA
python检测远程udp端口是否打开的方法
2015/03/14 Python
python3序列化与反序列化用法实例
2015/05/26 Python
pandas数据清洗,排序,索引设置,数据选取方法
2018/05/18 Python
pyqt5 实现 下拉菜单 + 打开文件的示例代码
2019/06/20 Python
Python 获取 datax 执行结果保存到数据库的方法
2019/07/11 Python
python flask中动态URL规则详解
2019/11/22 Python
django配置app中的静态文件步骤
2020/03/27 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
精选奢华:THE LIST
2019/09/05 全球购物
企业门卫岗位职责
2013/12/12 职场文书
劳动争议和解协议书范本
2014/11/20 职场文书
工程质量保证书
2015/05/09 职场文书
关于空气污染危害的感想
2015/08/11 职场文书
《我的长生果》教学反思
2016/02/20 职场文书
关于nginx 实现jira反向代理的问题
2021/09/25 Servers
python实现学员管理系统(面向对象版)
2022/06/05 Python