Najbardziej efektywny sposób konwersji HTMLCollection na macierz

Czy istnieje bardziej skuteczny sposób konwersji HTMLCollection na macierz, inny niż iteracja przez zawartość wspomnianej kolekcji i ręczne wpychanie każdego elementu do tablicy?

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

będzie miał ten sam efekt przy użyciu „natywnego” kodu.

Edytować

Ponieważ uzyskuje się wiele wyświetleń, zwróć uwagę (na komentarz @ oriol), że następujące bardziej zwięzłe wyrażenie jest faktycznie równoważne:

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

Zwróć jednak uwagę na komentarz @ JussiR, że w przeciwieństwie do formy „pełnej”, tworzy w tym procesie pustą, nieużywaną i rzeczywiście nieużywaną instancję tablicy. To, co robią kompilatory, jest poza zasięgiem programisty.

Edytować

Od ECMAScript 2015 (ES 6) istnieje również Array. Od :

var arr = Array.from(htmlCollection);

Edytować

ECMAScript 2015 udostępnia również operator rozkładania , który jest funkcjonalnie równoważny Array.from(chociaż uwaga, która Array.fromobsługuje funkcję odwzorowania jako drugi argument).

var arr = [...htmlCollection];

Potwierdziłem, że obie powyższe prace działają NodeList.

Porównanie wydajności wymienionych metod: http://jsben.ch/h2IFA

nie jestem pewien, czy jest to najbardziej wydajny, ale zwięzła składnia ES6 może wyglądać tak:

let arry = [...htmlCollection] 

Edycja: Kolejna, z komentarza Chris_F:

let arry = Array.from(htmlCollection)

Widziałem bardziej zwięzłą metodę pozyskiwania Array.prototypemetod, która działa równie dobrze. Przekształcanie HTMLCollectionobiektu w Arrayobiekt pokazano poniżej:

[] .slice.call (yourHTMLCollectionObject);

I, jak wspomniano w komentarzach, w przypadku starszych przeglądarek, takich jak IE7 i wcześniejsze, wystarczy użyć funkcji zgodności, takiej jak:

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

    return a
}

Wiem, że to stare pytanie, ale czułem, że zaakceptowana odpowiedź była nieco niepełna; więc pomyślałem, że wyrzucę to FWIW.

W przypadku implementacji w różnych przeglądarkach sugeruję, abyś spojrzał na funkcję prototype.js $A

skopiowane z 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;
}

Prawdopodobnie nie używa, Array.prototype.sliceponieważ nie jest dostępny w każdej przeglądarce. Obawiam się, że wydajność jest dość zła, ponieważ istnieje odwrócenie pętli javascript nad iterable.

To jest moje osobiste rozwiązanie, oparte na informacjach tutaj (ten wątek):

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

Gdzie $ A został opisany przez Garetha Davisa w jego poście:

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

Jeśli przeglądarka obsługuje najlepszy sposób, ok, w przeciwnym razie będzie korzystać z przeglądarki krzyżowej.

Działa to we wszystkich przeglądarkach, w tym we wcześniejszych wersjach IE.

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

Ponieważ jsperf jest obecnie niedostępny, oto jsfiddle, który porównuje wydajność różnych metod. https://jsfiddle.net/qw9qf48j/

Aby skutecznie przekonwertować tablicę na tablicę, możemy skorzystać z jQuery makeArray :

makeArray: Konwertuj obiekt podobny do tablicy na prawdziwą tablicę JavaScript.

Stosowanie:

var domArray = jQuery.makeArray(htmlCollection);

Trochę więcej:

Jeśli nie chcesz zachować odwołania do obiektu tablicy (przez większość czasu HTMLCollections zmieniają się dynamicznie, więc lepiej skopiować je do innej tablicy, w tym przykładzie zwróć szczególną uwagę na wydajność:

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.
}

Co to jest tablica?

HTMLCollection jest "array-like"przedmiotem, array-jak obiekty są podobne do obiektu Array, ale brakuje wiele jego definicji funkcjonalnym:

Obiekty podobne do tablic wyglądają jak tablice. Mają różne numerowane elementy i właściwość długości. Ale tam kończy się podobieństwo. Obiekty podobne do macierzy nie mają żadnych funkcji macierzy, a pętle wejściowe nawet nie działają!