Question

这可能听起来像一个愚蠢的问题，但

var arr1 = ['1', '2'];
var arr2 = ['3', '4'];
console.log(arr1.concat(arr2));

将输出["1", "2", "3", "4"]

但是

var arr1 = ['1', '2'];
console.log(
  arr1.concat(document.getElementsByTagName('h1'))
);

将输出["1", "2", HTMLCollection[2]]

如何将html集合与数组连接？

Answer 1

您需要将HTMLCollection转换为数组。在现代Javascript中执行此操作的最佳方法是Array.from。这会将任何类似数组的对象（或其他iterable value）转换为真正的Javascript数组。

arr1.concat(Array.from(document.getElementsByTagName('h1')))

Answer 2

您可以使用push.apply，如下所示：

var arr1 = ['1', '2'];
arr1.push.apply(arr1, document.getElementsByTagName('h1'));
console.log(arr1);

<h1>x</h1>
<h1>y</h1>

在ES2015 +（又名ES6 +）中，您可以使用带有扩展符号的push：

var arr1 = ['1', '2'];
arr1.push(...document.getElementsByTagName('h1'));
console.log(arr1);

<h1>x</h1>
<h1>y</h1>

请注意，在这两种情况下，这与concat不同，因为它避免了创建新数组（它只是修改arr1引用的原始数组）。这种差异是好事（不是创造不必要的对象）还是坏事（我想要一个新的数组！）取决于你的用例。： - ）

Answer 3

您可以使用 Array.from ，但它fairly new可能不是您需要的所有浏览器都支持。一些替代方案，其中最后一个将被所有正在使用的浏览器支持：

传播语法，这是新的，仅受最新浏览器支持且没有IE版本
Array.prototype.slice.call 将NodeList转换为数组，但在IE 8中失败，将主机对象传递给内置方法 this 失败
Array.prototype.map.call 转换为数组。避免IE 8问题，因为 map 需要进行填充（但是你也可以使用 Array.from 的polyfill并完成它）
使用 array.concat.apply 并将NodeList作为参数传递，不需要旧浏览器的polyfill

下面的Runnable片段。

＆＃13;

var arr = [0,1];
var divs = document.querySelectorAll('div');

// Use spread syntax, pretty new though
var spread = arr.concat(...divs);
console.log('Spread\n' + spread.join('\n'));

// Convert to array using slice, then concat
var sliced = Array.prototype.slice.call(divs).concat(arr);
console.log('Sliced\n' + sliced.join('\n'));

// Convert to array using map, then concat
var mapped = Array.prototype.map.call(divs, function(div){return div}).concat(arr);
console.log('Mapped\n' + mapped.join('\n'));

// Call concat with apply directly using concat
var conned = arr.concat.apply(arr, divs);
console.log('Conned\n' + conned.join('\n'));

＆＃13;

<div>div1</div>
<div>div2</div>

＆＃13;

如何将HTMLCollection与数组连接？

3 个答案: