有更有效的方法来转换一个HTMLCollection到数组,而不是通过迭代的内容说集合和手动推每个项目到数组?
当前回答
不确定这是否是最有效的,但简洁的ES6语法可能是:
let arry = [...htmlCollection]
编辑:另一个,来自Chris_F评论:
let arry = Array.from(htmlCollection)
其他回答
有时候,即使你以正确的方式写了代码,但它仍然不能正常工作。
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 []
[]
Console_javascript
为了解决这个问题,你必须在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]
为了高效地将类数组转换为数组,我们可以使用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的对象,但缺少很多函数定义:
类数组对象看起来像数组。它们有不同的编号 元素和length属性。但相似之处仅此而已。 类数组对象不具有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;
}
如果浏览器支持最好的方式,否则将使用跨浏览器。
我看到了一个更简洁的获取Array的方法。原型方法一般来说也很有效。将HTMLCollection对象转换为Array对象的演示如下:
[].slice.call( yourHTMLCollectionObject );
而且,正如评论中提到的,对于老式浏览器,比如IE7和更早的版本,你只需要使用兼容性函数就可以了,比如:
function toArray(x) {
for(var i = 0, a = []; i < x.length; i++)
a.push(x[i]);
return a
}
我知道这是一个老问题,但我觉得公认的答案有点不完整;所以我想先把这个扔出去。
不确定这是否是最有效的,但简洁的ES6语法可能是:
let arry = [...htmlCollection]
编辑:另一个,来自Chris_F评论:
let arry = Array.from(htmlCollection)