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

本文翻译自：Most efficient way to convert an HTMLCollection to an Array

有没有更有效的方法将HTMLCollection转换为数组，除了迭代所述集合的内容并手动将每个项目推入数组？

---

#1楼

参考：https://stackoom.com/question/vyD/将HTMLCollection转换为数组的最有效方法

---

#2楼

This is my personal solution, based on the information here (this thread): 这是我的个人解决方案，基于此处的信息（此主题）：

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

Where $A was described by Gareth Davis in his post: 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;
}

If browser supports the best way, ok, otherwise will use the cross browser. 如果浏览器支持最佳方式，那么，否则将使用跨浏览器。

---

#3楼

For a cross browser implementation I'd sugguest you look at prototype.js $A function 对于跨浏览器实现，我建议您查看prototype.js $A函数

copyed from 1.6.1 : 从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;
}

It doesn't use Array.prototype.slice probably because it isn't available on every browser. 它不使用Array.prototype.slice可能是因为它不是在每个浏览器上都可用。 I'm afraid the performance is pretty bad as there a the fall back is a javascript loop over the iterable . 我担心性能非常糟糕，因为回退是iterable的javascript循环。

---

#4楼

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

will have the same effect using "native" code. 将使用“本机”代码具有相同的效果。

Edit 编辑

Since this gets a lot of views, note (per @oriol's comment) that the following more concise expression is effectively equivalent: 由于这得到了很多的意见，说明（每@奥里奥尔的评论），下面的更简洁的表达实际上相当于：

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

But note per @JussiR's comment, that unlike the "verbose" form, it does create an empty, unused, and indeed unusable array instance in the process. 但请注意@ JussiR的评论，与“详细”形式不同，它确实在此过程中创建了一个空的，未使用的，实际上无法使用的数组实例。 What compilers do about this is outside the programmer's ken. 编译器对此做了什么是在程序员的肯定之外。

Edit 编辑

Since ECMAScript 2015 (ed 6) there is also Array.from : 自ECMAScript 2015（第6版）以来，还有Array.from ：

var arr = Array.from(htmlCollection);

Edit 编辑

ECMAScript 2015 also provides the spread operator , which is functionally equivalent to Array.from (although note that Array.from supports a mapping function as the second argument). ECMAScript 2015还提供了扩展运算符 ，它在功能上等同于Array.from （尽管注意Array.from支持映射函数作为第二个参数）。

var arr = [...htmlCollection];

I've confirmed that both of the above work on NodeList . 我已经确认上述两个都在NodeList上工作。

---

#5楼

I saw a more concise method of getting Array.prototype methods in general that works just as well. 我看到了一个更简洁的方法来获取一般的Array.prototype方法。 Converting an HTMLCollection object into an Array object is demonstrated below: 将HTMLCollection对象转换为Array对象如下所示：

[].slice.call( yourHTMLCollectionObject );

And, as mentioned in the comments, for old browsers such as IE7 and earlier, you simply have to use a compatibility function, like: 并且，正如评论中所提到的， 对于IE7及更早版本等旧浏览器，您只需使用兼容性功能，例如：

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

    return a
}

I know this is an old question, but I felt the accepted answer was a little incomplete; 我知道这是一个老问题，但我觉得接受的答案有点不完整; so I thought I'd throw this out there FWIW. 所以我以为我会把它扔到那里FWIW。

---

#6楼

not sure if this is the most efficient, but a concise ES6 syntax might be: 不确定这是否是最有效的，但简洁的ES6语法可能是：

let arry = [...htmlCollection] 

---

Edit: Another one, from Chris_F comment: 编辑：另一个，来自Chris_F评论：

let arry = Array.from(htmlCollection)