除了遍历所述集合的内容并手动将每个项目推入数组之外,是否有更有效的方法将 HTMLCollection 转换为数组?
for (var a=[], i=collection.length; i;) a[--i] = collection[i];
所以那里没有太多的“骗局”:-)
Array.prototype.slice.call
和 Brave(基于 Chrome 59.0.3071)在多次运行的两个 javascript 测试之间几乎没有区别。请参阅jsperf.com/htmlcollection-array-vs-jquery-children
var arr = Array.prototype.slice.call( htmlCollection )
使用“本机”代码将具有相同的效果。
编辑
由于这获得了很多意见,请注意(根据@oriol 的评论)以下更简洁的表达式实际上是等效的:
var arr = [].slice.call(htmlCollection);
但请注意,根据@JussiR 的评论,与“详细”形式不同,它确实在该过程中创建了一个空的、未使用的且确实不可用的数组实例。编译器对此做了什么超出了程序员的理解范围。
编辑
从 ECMAScript 2015 (ES 6) 开始,还有 Array.from:
var arr = Array.from(htmlCollection);
编辑
ECMAScript 2015 还提供了 spread operator,它在功能上等同于 Array.from
(尽管请注意 Array.from
支持映射函数作为第二个参数)。
var arr = [...htmlCollection];
我已确认上述两项都适用于 NodeList
。
上述方法的性能比较:http://jsben.ch/h2IFA
不确定这是否是最有效的,但简洁的 ES6 语法可能是:
let arry = [...htmlCollection]
编辑:另一个,来自 Chris_F 评论:
let arry = Array.from(htmlCollection)
Array.from()
Array.from
,即 from
。
我看到了一种更简洁的方法来获取 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
可能是因为它并非在每个浏览器上都可用。恐怕性能很差,因为回退是 iterable
上的 javascript 循环。
$A
函数大部分时间所做的事情。
这适用于所有浏览器,包括早期的 IE 版本。
var arr = [];
[].push.apply(arr, htmlCollection);
由于 jsperf 目前还处于 down 状态,这里有一个 jsfiddle 比较不同方法的性能。 https://jsfiddle.net/qw9qf48j/
var args = (htmlCollection.length === 1 ? [htmlCollection[0]] : Array.apply(null, htmlCollection));
为了以有效的方式将类数组转换为数组,我们可以使用 jQuery makeArray
:
makeArray:将类数组对象转换为真正的 JavaScript 数组。
用法:
var domArray = jQuery.makeArray(htmlCollection);
一点额外的:
如果您不想保留对数组对象的引用(大多数时候 HTMLCollections 是动态更改的,因此最好将它们复制到另一个数组中,此示例密切关注性能:
var domDataLength = domData.length //Better performance, no need to calculate every iteration the domArray length
var resultArray = new Array(domDataLength) // Since we know the length its improves the performance to declare the result array from the beginning.
for (var i = 0 ; i < domDataLength ; i++) {
resultArray[i] = domArray[i]; //Since we already declared the resultArray we can not make use of the more expensive push method.
}
什么是类数组?
HTMLCollection 是一个 "array-like"
对象,array-like 对象类似于数组的对象,但缺少很多功能定义:
类数组对象看起来像数组。它们有各种编号的元素和一个长度属性。但这就是相似之处停止的地方。类数组对象没有 Array 的任何功能,for-in 循环甚至不起作用!
这是我个人的解决方案,基于此处的信息(此线程):
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;
}
如果浏览器支持最好的方式,ok,否则将使用跨浏览器。
[,,]
变为 [undefined, undefined]
。
有时,即使您以正确的方式编写代码,但仍然无法正常工作。
var allbuttons = document.getElementsByTagName("button");
console.log(allbuttons);
var copyAllButtons = [];
for (let i = 0; i < allbuttons.length; i++) {
copyAllButtons.push(allbuttons[i]);
}
console.log(copyAllButtons);
你得到空数组。像这样
HTMLCollection []
[]
为了解决这个问题,您必须在 html 文件中的 body 标记之后添加 javascript 文件的链接。
<script src="./script.js"></script>
如下所示,html_file
最终输出
HTMLCollection(6) [button.btn.btn-dark.click-me, button.btn.btn-dark.reset, button#b, button#b, button#b, button#b, b: button#b]
(6) [button.btn.btn-dark.click-me, button.btn.btn-dark.reset, button#b, button#b, button#b, button#b]
我认为在 HTMLCollection
的实例上调用 Array.prototype
函数 比将集合转换为数组(例如,[...collection]
或 Array.from(collection)
)要好得多,因为在后一种情况下,集合被不必要的隐式迭代并创建了一个新的数组对象,这会占用额外的资源。 Array.prototype
迭代函数可以安全地调用具有从 [0]
开始的连续数字键和具有此类键数量的有效数字值的 length
属性的对象(包括例如 HTMLCollection
和 FileList
的实例),所以这是一种可靠的方法。另外,如果经常需要这样的操作,可以使用一个空数组[]
来快速访问Array.prototype
函数;或者可以创建 Array.prototype
的快捷方式。一个可运行的例子:
const _ = Array.prototype;常量集合 = document.getElementById('ol').children; alert(_.reduce.call(collection, (acc, { textContent }, i) => { return acc += `${i+1}) ${textContent}` + '\n'; }, '') );
[].slice.call(htmlCollection)
也有效。Array.from
,即from
。[Symbol.iterator]()
方法。