为什么Array.concat在连接jQuery对象的两元素和三元素数组时会产生一个三元素数组

Question

我有一个表单，其中有两个固定的输入元素，后面跟着任意数量的动态创建的元素，这些元素的name属性值都以相同的字符串作为后缀(参见代码片段)。我试图到达一个jQuery对象数组，每个输入元素一个。

然而，似乎当我连接一个包含代表前两个元素的对象的2元素数组和一个包含其他元素对象的3元素数组时，结果只是一个包含第一个数组对象的数组，只有一个额外的元素包含第二个数组的对象作为数组，这不是我如何理解concat的工作。

我希望新数组是一个包含五个元素的数组，其中包含代表前两个固定输入的jQuery对象，然后是其余的。

忽略这是否是解决手头问题的正确方法(很可能不是):我的期望是错误的吗?有人能解释为什么concat产生这个结果吗?

var firstTwoFields = [
  $('[name=field1]'),
  $('[name=field2]')
];
var otherFields = $('[name$=test]').map(function() { return $(this); });
var newArray = firstTwoFields.concat(otherFields);
document.write('firstTwoFields.length: ' + firstTwoFields.length + '<br>');
document.write('otherFields.length: ' + otherFields.length + '<br>');
document.write('newArray.length: ' + newArray.length + '<br>');
document.write('newArray[2].length: ' + newArray[2].length + '<br>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input name="field1" value="" /><br>
<input name="field2" value="" /><br>
<input name="field3_test" value="" /><br>
<input name="field4_test" value="" /><br>
<input name="field5_test" value="" /><br>
<br>

Answer 1

$().map()将返回jQuery对象，是数组，如，并有一个length，但不是一个适当的数组，你可以使用Array.prototype方法。

你需要使用get()来返回一个正确的数组，或者使用$.map():

var otherFields = $('[name$=test]').map(function() { return $(this); }).get();

使用$.map():

 var otherFields = $.map( $('[name$=test]'), function(elem) { return $(elem); })

参考:get() docs

Answer 2

明白了。你需要在otherFields上使用.get()，因为你使用.map()，它返回jQuery对象。

var firstTwoFields = [
  $('[name=field1]'),
  $('[name=field2]')
];
var otherFields = $('[name$=test]').map(function() { return $(this); }).get();
var newArray = firstTwoFields.concat(otherFields);
document.write('firstTwoFields.length: ' + firstTwoFields.length + '<br>');
document.write('otherFields.length: ' + otherFields.length + '<br>');
document.write('newArray.length: ' + newArray.length + '<br>');
document.write('newArray[2].length: ' + newArray[2].length + '<br>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input name="field1" value="" /><br>
<input name="field2" value="" /><br>
<input name="field3_test" value="" /><br>
<input name="field4_test" value="" /><br>
<input name="field5_test" value="" /><br>
<br>