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

2020/09/28 14:01 · javascript ·  · 0评论

除了遍历所述集合的内容并将每个项目手动推入数组之外,是否有更有效的方法将HTMLCollection转换为数组?

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
}

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

对于跨浏览器的实现,我建议您看一下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

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

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

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

为了高效地将类似数组的数组转换为数组,我们可以使用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"对象,该阵列状的对象类似于数组的对象,但缺少了许多功能上的定义:

类数组对象看起来像数组。它们具有各种编号的元素和length属性。但这就是相似性停止的地方。类似数组的对象没有数组的任何功能,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;
}

如果浏览器支持最佳方式,可以,否则将使用跨浏览器。

本文地址:http://javascript.askforanswer.com/jianghtmlcollectionzhuanhuanweishuzudezuiyouxiaofangfa.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!