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


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 相关文章推荐
DWR Ext 加载数据
Mar 22 Javascript
JavaScript 模拟用户单击事件
Dec 31 Javascript
javascript检测是否联网的实现代码
Sep 28 Javascript
js创建对象的方式总结
Jan 10 Javascript
Javascript基础教程之定义和调用函数
Jan 18 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
Dec 08 Javascript
JS中的三个循环小结
Jun 20 Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
Jul 19 Javascript
利用jqgrid实现上移下移单元格功能
Nov 07 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
Nov 26 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数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
PHP编程计算文件或数组中单词出现频率的方法
2017/05/22 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
javascript算法学习(直接插入排序)
2011/04/12 Javascript
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
input标签内容改变的触发事件介绍
2014/06/18 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
jQuery中has()方法用法实例
2015/01/06 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
实例详解angularjs和ajax的结合使用
2015/10/22 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
微信小程序 textarea 组件详解及简单实例
2017/01/10 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
小程序input数据双向绑定实现方法
2019/10/17 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
Python实现的插入排序算法原理与用法实例分析
2017/11/22 Python
对python打乱数据集中X,y标签对的方法详解
2018/12/14 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
华为俄罗斯官方网上商城:购买Huawei手机和平板
2017/04/21 全球购物
三星新西兰官网:Samsung新西兰
2019/03/05 全球购物
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
学校岗位设置方案
2014/01/16 职场文书
班级安全教育实施方案
2014/02/23 职场文书
公司会计主管岗位责任制
2014/03/01 职场文书
反对邪教标语
2014/06/30 职场文书
工作证明英文模板
2014/10/21 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS
用Python爬取某乎手机APP数据
2021/06/15 Python