实际参数在函数中我们可以使用 arguments 对象获得 (注:形参可通过 arguments.callee 获得),虽然 arguments 对象与数组形似,但仍不是真正意义上的数组。

值得庆幸的是,我们可以通过数组的 slice 方法将 arguments 对象转换成真正的数组:

var args = Array.prototype.slice.call(arguments, 0);

对于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, 0); // 怿飞注:下称方法一
do this…
var args = [].slice.call(arguments, 0); // 怿飞注:下称方法二

但二者的性能差异真的存在吗?经过个人简单测试发现:

arguments.length 较小的时候,方法二性能上稍有一点点优势,而在arguments.length 较大的时候,方法一却又稍有优势。

2010年1月30日更新(测试地址):几经验证,性能差异不大,反而第一张方法性能稍优势一点,或许由于第二种方法创建新数组产生开销。

最后附上方法三,最老土的方式:

var args = [];
for (var i = 1; i < arguments.length; i++) {
    args.push(arguments[i]);
}

不过对于平常来说,个人建议使用第一种方法,但任何解决方案,没有最好的,只有最合适:

var args = Array.prototype.slice.call(arguments, 0); 

------------------------------------------------------------------

如何将 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.



共有23 条评论

  1. 1. 头像 船长

    请教一下,什么时候才需要将arguments转换成数组?

  2. 2. 头像 army8735

    两种不同方法的性能测试我想知道是怎样测的……
    猜测原因在于方法二[]是创建一个数组实例对象,方法一直接引用数组原型所造成的……

    nodelist那个答案除了笨方法外我不知道……因为看mt源码也只是笨方法处理……

  3. 3. 头像 船长

    var args = [].slice.call(arguments);
    这样写不是又减小一点字节?

  4. 4. 头像 怿飞

    @army8735 很简单的测试:通过不同类型的参数,数量不同,多次运行取运行平均值。

  5. 5. 头像 怿飞

    @船长 当你需要 arguments 使用 Array 的一些方法时,比如:push、shift、pop等时,那就需要将 arguments 转换成数组了。

    对于第二个建议,规范上说第二个参数可以省略,第一个参数补上应该相对以后还是安全的。

  6. 6. 头像 dongyuwei

    除了slice切片方法,splice拼接方法也是可以的。
    function test(a,b,c){
    console.log([].splice.call(arguments,0);
    )};
    test(1,2,3);//[1,2,3]

  7. 7. 头像 dongyuwei

    分类“前端常用工具”所有日志

    Fatal error: Call to undefined function: st_tag_cloud() in /nfs/c02/h09/mnt/28795/domains/planabc.net/html/wp-content/themes/mind/archive.php on line 29

    这个链接访问不了了?

  8. 8. 头像 simaopig

    貌似jQuery有makeArray的实现方式。。

  9. 9. 头像 怿飞

    @dongyuwei 谢谢,分类模板调整过了,更新后原来的一个插件失效了。

  10. 10. 头像 怿飞

    @dongyuwei 其实Array的很多方法都可以这样使用的,呵呵

  11. 11. 头像 cc

    ie 的 NodeList不能用slice 方法
    貌似只能用原始的方法

  12. 12. 头像 闲耘™

    不知道您是怎样测试的,我得到的结论是这两种方法其实效率相当。
    http://blog.xianyun.org/2010/01/07/performance-of-arguments-to-array.html

  13. 13. 头像 闲耘™

    网站目前出问题了,可以直接看这个:
    http://hotoo.googlecode.com/svn/trunk/test/toArray.html

    另外关于nodelist to array:
    http://hotoo.googlecode.com/svn/trunk/test/nodeList2Array.html
    http://hotoo.googlecode.com/svn/trunk/test/nodeList2Array2.html

  14. 14. 头像 传说中的勇哥

    各位谁真正处理过javascript跨域的问题,我就是想给别人作的页面的文本框赋值,通过我的页面,那位高手帮忙!

  15. 15. 头像 nttdocomo

    楼上的可以看看怿飞的window.name和jsonp!

  16. 16. 头像 nttdocomo

    还有我想问,将这些对象转换为数组有什么实际的使用例子。为什么要这样做?arguments不是也可以用for循环来拿里面的元素吗?为什么要转换为数组呢?

  17. 17. 头像 怿飞

    @nttdocomo 当你需要 arguments 使用 Array 的一些方法时,比如:push、shift、pop等时,那就需要将 arguments 转换成数组了。

  18. 18. 头像 闲耘™

    是否真的需要转成Array,我觉得在实际应用中需要停下来想一想。
    如果只需要临时改变arguments这个参数列表(例如增加两个参数),而不改变arguments本身的类型和特性,可以直接如下调用(少了转换成数组的过程,可能会更快[未测试],虽然这个性能的提升也未必有什么关键意义):
    !function(){
    Array.prototype.push.call(arguments, 4,5);
    document.write(arguments.length+”");
    document.write((arguments instanceof Array)+”");
    document.write(Array.prototype.join.call(arguments, “,”));
    }(0,1,2,3);

  19. 19. 头像 天光土木在线

    有点难度哦!

  20. 20. 头像 壁纸在线

    看不太明白
    平时用开JQUERY

  21. 21. 头像 kangre

    要慢慢学了!

  22. 22. 头像 怿飞

    @闲耘 谢谢,原文的确有不准确地方,已经修正,测试地址:http://www.planabc.net/demo/toarray/arguments.html

  23. 23. 头像 dreamer

    arguments转换成数组,这样也可以:
    var a = [];
    a.push.apply(a, arguments);
    //唯一[可能]的缺点是,需要定义一个变量

发表评论

(必填)

(必填,会为您保密)

评论仅支持“a、abbr、strong、em、blockquote、code”几个简单的标签