为什么.join（）不使用函数参数？

Question

Why does this work (returns "one, two, three"):

var words = ['one', 'two', 'three'];
$("#main").append('<p>' + words.join(", ") + '</p>');

and this work (returns "the list: 111"):

var displayIt = function() {
    return 'the list: ' + arguments[0];
}   
$("#main").append('<p>' + displayIt('111', '222', '333') + '</p>');

but not this (returns blank):

var displayIt = function() {
    return 'the list: ' + arguments.join(",");
}   
$("#main").append('<p>' + displayIt('111', '222', '333') + '</p>');

What do I have to do to my "arguments" variable to be to use .join() on it?

Answer 1

It doesn't work because the arguments object is not an array, although it looks like it. It has no join method:

>>> var d = function() { return '[' + arguments.join(",") + ']'; }
>>> d("a", "b", "c")
TypeError: arguments.join is not a function

To convert arguments to an array, you can do:

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

Now join will work:

>>> var d = function() {
  var args = Array.prototype.slice.call(arguments);
  return '[' + args.join(",") + ']';
}
>>> d("a", "b", "c");
"[a,b,c]"

Alternatively, you can use jQuery's makeArray , which will try to turn "almost-arrays" like arguments into arrays:

var args = $.makeArray(arguments);

Here's what the Mozilla reference (my favorite resource for this sort of thing) has to say about it:

The arguments object is not an array. It is similar to an array, but does not have any array properties except length . For example, it does not have the pop method. ...

The arguments object is available only within a function body. Attempting to access the arguments object outside a function declaration results in an error.

Answer 2

If you are not interested on other Array.prototype methods, and you want simply to use join , you can invoke it directly, without converting it to an array:

var displayIt = function() {
    return 'the list: ' + Array.prototype.join.call(arguments, ',');
};

Also you might find useful to know that the comma is the default separator, if you don't define a separator, by spec the comma will be used.

Answer 3

Just use the jQuery utility function makeArray

arguments is not an Array, it is an object. But, since it so "array-like", you can call the jQuery utility function makeArray to make it work:

var displayIt = function() {
    return 'the list: ' + $.makeArray(arguments).join(",");
}   
$("#main").append('<p>' + displayIt('111', '222', '333') + '</p>');

Which will output:

<p>the list: 111,222,333</p>

Answer 4

You could use this jQuery .joinObj Extension/Plugin I made.

As you'll see in that fiddle, you can use it as follows:

$.joinObj(args, ",");

or

$.(args).joinObj(",");

---

Plugin Code:

(function(c){c.joinObj||(c.extend({joinObj:function(a,d){var b="";if("string"===typeof d)for(x in a)switch(typeof a[x]){case "function":break;case "object":var e=c.joinObj(a[x],d);e!=__proto__&&(b+=""!=b?d+e:e);break;default:"selector"!=x&&"context"!=x&&"length"!=x&&"jquery"!=x&&(b+=""!=b?d+a[x]:a[x])}return b}}),c.fn.extend({joinObj:function(a){return"object"===typeof this&&"string"===typeof a?c.joinObj(this,a):c(this)}}))})(jQuery);

Answer 5

You can use typeof to see what's happening here:

>>> typeof(['one', 'two', 'three'])
"object"
>>> typeof(['one', 'two', 'three'].join)
"function"
>>> typeof(arguments)
"object"
>>> typeof(arguments.join)
"undefined"

Here you can see that typeof returns "object" in both cases but only one of the objects has a join function defined.

Answer 6

arguments is not a jQuery object, just a regular JavaScript object. Extend it before you try to call .join() . I think you would write:

return 'the list:' + $(arguments)[0];

(I'm not too familiar with jQuery, only Prototype, so I hope this is not completely bogus.)

Edit: It's wrong! But in his response, Doug Neiner describes what I'm trying to accomplish.

Answer 7

I don't know if there's a simple way to convert arguments into an array, but you can try this:

var toreturn = "the list:";
for(i = 0; i < arguments.length; i++)
{
   if(i != 0) { toreturn += ", "; }
   toreturn += arguments[i];
}

Answer 8

At the moment you can't join array arguments, because they aren't an array, shown here

so you have to either first turn them into an array like this,

function f() {
  var args = Array.prototype.slice.call(arguments, f.length);
  return 'the list: ' + args.join(',');
}

or like this, a bit shorter

function displayIt() {
  return 'the list: ' + [].join.call(arguments, ',');
}

if you are using something like babel or a compatible browser to use es6 features, you can also do this using rest arguments.

function displayIt(...args) {
  return 'the list: ' + args.join(',');
}

displayIt('111', '222', '333');

which would let you do even cooler stuff like

function displayIt(start, glue, ...args) {
  return start + args.join(glue);
}

displayIt('the start: ', '111', '222', '333', ',');