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


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 1.5最新版本的改进细节分析
Jan 19 Javascript
js将字符串转成正则表达式的实现方法
Nov 13 Javascript
Jquery插件编写简明教程
Mar 25 Javascript
取得元素的左和上偏移量的方法
Sep 17 Javascript
Javascript原型链和原型的一个误区
Oct 22 Javascript
JavaScript编写推箱子游戏
Jul 07 Javascript
jquery判断input值不为空的方法
Jun 05 Javascript
Bootstrap缩略图的创建方法
Mar 22 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
Jul 24 Javascript
js中Function引用类型常见有用的方法和属性详解
Dec 11 Javascript
解决vue-router路由拦截造成死循环问题
Aug 05 Javascript
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
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
真正的ZIP文件操作类(php)
2007/07/21 PHP
PHP Error与Logging函数的深入理解
2013/06/03 PHP
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
PHP实现微信公众平台音乐点播
2014/03/20 PHP
在Debian系统下配置LNMP的教程
2015/07/09 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
2013/01/20 Javascript
innerText 使用示例
2014/01/23 Javascript
jquery 取子节点及当前节点属性值
2014/07/25 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
pyqt4教程之widget使用示例分享
2014/03/07 Python
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
Django 路由控制的实现代码
2018/11/08 Python
Python制作exe文件简单流程
2019/01/24 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
利用anaconda作为python的依赖库管理方法
2019/08/13 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
如何让PyQt5中QWebEngineView与JavaScript交互
2020/10/21 Python
求职简历中的自我评价分享
2013/12/08 职场文书
幼儿园数学教学反思
2014/02/02 职场文书
2014年底工作总结
2014/12/15 职场文书
英文辞职信范文
2015/05/13 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript
JS前端监控采集用户行为的N种姿势
2022/07/23 Javascript