为什么 .join() 不能与函数参数一起使用？

Question

为什么会这样（返回“一、二、三”）：

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

这项工作（返回“列表：111”）：

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

但不是这个（返回空白）：

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

我必须对我的“参数”变量执行什么操作才能在其上使用 .join()？

Answer 1

它不起作用，因为arguments 对象不是一个数组，尽管它看起来像它。它没有join 方法：

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

要将arguments 转换为数组，您可以：

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

现在join 可以工作了：

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

或者，您可以使用 jQuery 的 makeArray，它会尝试将像 arguments 这样的“几乎数组”转换为数组：

var args = $.makeArray(arguments);

以下是 Mozilla reference（我最喜欢的此类资源）对此的评价：

arguments 对象不是数组。 它类似于数组，但确实 没有任何数组属性，除了 length。例如，它没有 流行的方法。 ...

arguments 对象仅可用 在一个函数体内。试图 访问 a 之外的参数对象 函数声明导致 错误。

Answer 2

如果您对其他Array.prototype 方法不感兴趣，而只想使用join，则可以直接调用它，无需将其转换为数组：

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

另外，您可能会发现知道逗号是默认分隔符很有用，如果您没有定义分隔符，spec 将使用逗号。

Answer 3

你可以用这个jQuery .joinObj Extension/Plugin我做的。

正如您将在该小提琴中看到的那样，您可以按如下方式使用它：

$.joinObj(args, ",");

或

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

---

插件代码：

(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 4

只需使用 jQuery 实用函数makeArray

arguments 不是一个数组，它是一个对象。但是，由于它非常“类似数组”，您可以调用 jQuery 实用函数 makeArray 使其工作：

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

将输出：

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

Answer 5

目前你不能加入数组参数，因为它们不是数组，shown here

所以你必须先把它们变成这样的数组，

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

或者像这样，短一点

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

如果你正在使用类似babel 的东西或兼容的浏览器来使用 es6 功能，你也可以使用 rest 参数来做到这一点。

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

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

这会让你做更酷的事情，比如

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

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

Answer 6

您可以使用 typeof 来查看这里发生了什么：

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

在这里您可以看到 typeof 在两种情况下都返回“object”，但只有一个对象定义了连接函数。

Answer 7

不知道有没有简单的方法把参数转换成数组，但是你可以试试这个：

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

Answer 8

arguments 不是一个 jQuery 对象，只是一个普通的 JavaScript 对象。在您尝试致电.join() 之前扩展它。我想你会写：

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

（我对jQuery不太熟悉，只会Prototype，所以我希望这不是完全伪造的。）

编辑：错了！但在他的回复中，Doug Neiner 描述了我正在努力实现的目标。