除了遍历所述集合的内容并手动将每个项目推入数组之外，是否有更有效的方法将 HTMLCollection 转换为数组？
将 HTMLCollection 转换为数组的最有效方法
IT技术
javascript
arrays
object
2021-02-07 06:16:02
6个回答
var arr = Array.prototype.slice.call( htmlCollection )
使用“本机”代码将具有相同的效果。
编辑
由于这得到了很多的意见，说明（每@奥里奥尔的评论），下面的更简洁的表达是有效等价的：
var arr = [].slice.call(htmlCollection);
但是请注意@JussiR 的评论，与“详细”形式不同，它确实在此过程中创建了一个空的、未使用的且实际上无法使用的数组实例。编译器对此的处理超出了程序员的知识范围。
编辑
从 ECMAScript 2015 (ES 6) 开始，还有Array.from：
var arr = Array.from(htmlCollection);
编辑
ECMAScript 2015 还提供了扩展运算符，它在功能上等效于Array.from（但请注意，它Array.from支持映射函数作为第二个参数）。
var arr = [...htmlCollection];
我已经确认上述两项都适用于NodeList.
上述方法的性能比较：http : //jsben.ch/h2IFA
不确定这是否最有效，但简洁的 ES6 语法可能是：
let arry = [...htmlCollection]
编辑：另一个，来自 Chris_F 评论：
let arry = Array.from(htmlCollection)
我看到了一种更简洁的获取Array.prototype方法的方法，它也同样有效。下面演示了将HTMLCollection对象转换为Array对象的过程：
[].slice.call( yourHTMLCollectionObject );
而且，正如评论中提到的，对于旧浏览器，例如 IE7 及更早版本，您只需使用兼容功能，例如：
function toArray(x) {
for(var i = 0, a = []; i < x.length; i++)
a.push(x[i]);
return a
}
我知道这是一个老问题，但我觉得接受的答案有点不完整；所以我想我会把它扔出去 FWIW。
对于跨浏览器实现，我建议您查看prototype.js $A函数
function $A(iterable) {
if (!iterable) return [];
if ('toArray' in Object(iterable)) return iterable.toArray();
var length = iterable.length || 0, results = new Array(length);
while (length--) results[length] = iterable[length];
return results;
}
它不使用Array.prototype.slice可能是因为它不是在每个浏览器上都可用。恐怕性能很差，因为回退是 .js 文件上的 javascript 循环iterable。
这适用于所有浏览器，包括早期的 IE 版本。
var arr = [];
[].push.apply(arr, htmlCollection);
由于jsperf目前还处于宕机状态，这里有一个jsfiddle比较不同方法的性能。https://jsfiddle.net/qw9qf48j/