将HTMLCollection转换为数组最有效的方法

有没有一种更有效的方法来将HTMLCollection转换为数组，除了遍历所述集合的内容并手动将每个项目推送到数组？

Answer 1

 var arr = Array.prototype.slice.call( htmlCollection ) 

将使用“原生”代码具有相同的效果。

编辑

由于这得到了很多的意见，请注意（per @ oriol的评论）下面更简洁的expression式是等效的：

 var arr = [].slice.call(htmlCollection); 

但是，根据@ JussiR的评论，不像“冗长”的forms，它确实在这个过程中创build了一个空的，未使用的，实际上不可用的数组实例。 编译器所做的是程序员的外部。

编辑

由于ECMAScript 2015（ed 6）也有Array.from ：

 var arr = Array.from(htmlCollection); 

Answer 2

不确定这是否是最有效的，但简明的ES6语法可能是：

 let arry = [...htmlCollection] 

---

编辑：另一个，从Chris_F评论：

 let arry = Array.from(htmlCollection) 

Answer 3

我看到了一个更简洁的获取Array.prototype方法的方法。 下面演示了HTMLCollection将HTMLCollection对象转换为Array对象：

 [] .slice.call（yourHTMLCollectionObject）;

而且，正如评论中所提到的， 对于像IE7和更早版本的旧浏览器，您只需使用兼容性function，如：

 function toArray(x) { for(var i = 0, a = []; i < x.length; i++) a.push(x[i]); return a } 

我知道这是一个古老的问题，但我觉得接受的答案有点不完整， 所以我想我会把它扔在那里FWIW。

Answer 4

对于跨浏览器实现，我build议你看一下prototype.js $A函数

从1.6.1拷贝 ：

 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可能是因为它不适用于每个浏览器。 恐怕性能是非常糟糕的，因为那里的回落是一个JavaScript循环iterable 。

Answer 5

这是我个人的解决scheme，根据这里的信息（这个线程）：

 var Divs = new Array(); var Elemns = document.getElementsByClassName("divisao"); try { Divs = Elemns.prototype.slice.call(Elemns); } catch(e) { Divs = $A(Elemns); } 

加雷斯·戴维斯（Gareth Davis）在他的文章中描述了$ 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; } 

如果浏览器支持最佳方式，那么确定，否则将使用跨浏览器。

Answer 6

这适用于所有浏览器，包括较早的IE版本。

 var arr = []; [].push.apply(arr, htmlCollection); 

由于jsperf目前仍然处于closures状态，因此这里是一个比较不同方法性能的jsfiddle。 https://jsfiddle.net/qw9qf48j/