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

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

 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); 

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

 let arry = [...htmlCollection] 

编辑:另一个,从Chris_F评论:

 let arry = Array.from(htmlCollection) 

我看到了一个更简洁的获取Array.prototype方法的方法。 下面演示了HTMLCollectionHTMLCollection对象转换为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。

对于跨浏览器实现,我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

这是我个人的解决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; } 

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

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

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

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