Die effizienteste Methode zum Konvertieren einer HTMLCollection in ein Array

Gibt es eine effizientere Möglichkeit, eine HTMLCollection in ein Array zu konvertieren, als den Inhalt dieser Sammlung zu durchlaufen und jedes Element manuell in ein Array zu verschieben?

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

hat den gleichen Effekt mit "nativem" Code.

Bearbeiten

Da dies viele Ansichten erhält, beachten Sie (per @ oriols Kommentar), dass der folgende präzisere Ausdruck effektiv äquivalent ist:

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

Beachten Sie jedoch gemäß dem Kommentar von @ JussiR, dass im Gegensatz zum "ausführlichen" Formular eine leere, nicht verwendete und tatsächlich unbrauchbare Array-Instanz erstellt wird. Was Compiler dagegen tun, liegt außerhalb des Ken des Programmierers.

Bearbeiten

Seit ECMAScript 2015 (ES 6) gibt es auch Array.from :

var arr = Array.from(htmlCollection);

Bearbeiten

ECMAScript 2015 bietet auch den Spread-Operator , der funktional äquivalent zu ist Array.from(obwohl beachten Sie, dass Array.fromeine Zuordnungsfunktion als zweites Argument unterstützt wird).

var arr = [...htmlCollection];

Ich habe bestätigt, dass beide oben genannten Arbeiten funktionieren NodeList.

Ein Leistungsvergleich für die genannten Methoden: http://jsben.ch/h2IFA

Ich bin mir nicht sicher, ob dies die effizienteste ist, aber eine präzise ES6-Syntax könnte sein:

let arry = [...htmlCollection] 

Edit: Noch einer, aus Chris_F Kommentar:

let arry = Array.from(htmlCollection)

Ich habe eine präzisere Methode gesehen, um Array.prototypeMethoden im Allgemeinen zu erhalten, die genauso gut funktioniert. Das Konvertieren eines HTMLCollectionObjekts in ein ArrayObjekt wird unten gezeigt:

[] .slice.call (yourHTMLCollectionObject);

Und wie in den Kommentaren erwähnt, müssen Sie für alte Browser wie IE7 und früher einfach eine Kompatibilitätsfunktion verwenden, wie:

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

    return a
}

Ich weiß, dass dies eine alte Frage ist, aber ich fand, dass die akzeptierte Antwort etwas unvollständig war; Also dachte ich, ich würde das hier rauswerfen, FWIW.

Für eine browserübergreifende Implementierung würde ich empfehlen, dass Sie sich die Funktion prototype.js ansehen$A

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

Es wird Array.prototype.slicewahrscheinlich nicht verwendet, da es nicht in jedem Browser verfügbar ist. Ich fürchte, die Leistung ist ziemlich schlecht, da der Fallback eine Javascript-Schleife über dem ist iterable.

Dies ist meine persönliche Lösung, basierend auf den Informationen hier (dieser Thread):

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

Wo $ A von Gareth Davis in seinem Beitrag beschrieben wurde:

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

Wenn der Browser den besten Weg unterstützt, ok, sonst wird der Cross-Browser verwendet.

Dies funktioniert in allen Browsern, einschließlich früherer IE-Versionen.

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

Da jsperf derzeit noch nicht verfügbar ist, finden Sie hier eine jsfiddle, die die Leistung verschiedener Methoden vergleicht. https://jsfiddle.net/qw9qf48j/

Um Array-like in Array auf effiziente Weise zu konvertieren, können wir die jQuery verwenden makeArray :

makeArray: Konvertiert ein Array-ähnliches Objekt in ein echtes JavaScript-Array.

Verwendungszweck:

var domArray = jQuery.makeArray(htmlCollection);

Ein kleines Extra:

Wenn Sie keinen Verweis auf das Array-Objekt behalten möchten (HTMLCollections werden meistens dynamisch geändert, sodass es besser ist, sie in ein anderes Array zu kopieren. In diesem Beispiel wird die Leistung genau beachtet:

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

Was ist Array-ähnlich?

HTMLCollection ist ein "array-like"Objekt. Die Array-ähnlichen Objekte ähneln dem Objekt des Arrays, es fehlt jedoch ein Großteil seiner funktionalen Definition:

Array-ähnliche Objekte sehen aus wie Arrays. Sie haben verschiedene nummerierte Elemente und eine Längeneigenschaft. Aber hier hört die Ähnlichkeit auf. Array-ähnliche Objekte haben keine der Array-Funktionen, und For-In-Schleifen funktionieren nicht einmal!