Filtern oder Zuordnen von Knotenlisten in ES6

Was ist der effizienteste Weg, um eine Knotenliste in ES6 zu filtern oder zuzuordnen?

Basierend auf meinen Messwerten würde ich eine der folgenden Optionen verwenden:

[...nodelist].filter

oder

Array.from(nodelist).filter

Welches würdest du empfehlen? Und gibt es bessere Möglichkeiten, zum Beispiel ohne Arrays?

• [...nodelist] macht ein Array aus einem Objekt, wenn das Objekt iterierbar ist.
• Array.from(nodelist)macht ein Array aus einem Objekt, wenn das Objekt iterierbar ist oder wenn das Objekt Array-ähnlich ist (hat .lengthund numerische Requisiten)

Ihre beiden Beispiele sind identisch, falls NodeList.prototype[Symbol.iterator]vorhanden, da beide Fälle iterable abdecken. Wenn Ihre Umgebung nicht so konfiguriert wurde, dass sie NodeListiteriert werden kann, schlägt Ihr erstes Beispiel fehl und das zweite ist erfolgreich. behandelt diesen FallBabel derzeit nicht richtig .

Wenn Ihr NodeListalso iterierbar ist, liegt es wirklich an Ihnen, was Sie verwenden. Ich würde wahrscheinlich von Fall zu Fall wählen. Ein Vorteil davon Array.fromist, dass ein zweites Argument einer Zuordnungsfunktion erforderlich ist, während das erste [...iterable].map(item => item)ein temporäres Array erstellen Array.from(iterable, item => item)müsste , dies jedoch nicht. Wenn Sie die Liste jedoch nicht zuordnen, spielt dies keine Rolle.

TL; DR;

Array.prototype.slice.call(nodelist).filter

Die Slice () -Methode gibt ein Array zurück. Das zurückgegebene Array ist eine flache Kopie der Sammlung (NodeList). Es funktioniert also schneller als Array.from (). Es funktioniert also genauso schnell wie Array.from ()

Elemente der ursprünglichen Sammlung werden wie folgt in das zurückgegebene Array kopiert:

• Bei Objektreferenzen (und nicht dem eigentlichen Objekt) kopiert Slice Objektreferenzen in das neue Array. Sowohl das ursprüngliche als auch das neue Array beziehen sich auf dasselbe Objekt. Wenn sich ein referenziertes Objekt ändert, sind die Änderungen sowohl für das neue als auch für das ursprüngliche Array sichtbar.
• Bei Zeichenfolgen, Zahlen und Booleschen Werten (nicht String-, Zahlen- und Booleschen Objekten) kopiert Slice die Werte in das neue Array. Änderungen an der Zeichenfolge, Zahl oder dem Booleschen Wert in einem Array wirken sich nicht auf das andere Array aus.

Kurze Erklärung zu den Argumenten

Array.prototype.slice (beginIndex, endIndex)

• Nimmt optionale Argumente beginIndex und endIndex. Wenn sie nicht bereitgestellt werden, verwendet Slices beginIndex == 0 und extrahiert somit alle Elemente aus der Sammlung

Array.prototype.slice.call (Namespace, beginIndex, endIndex)

• nimmt ein Objekt als erstes Argument. Wenn wir eine Sammlung als Objekt verwenden, bedeutet dies wörtlich, dass wir die Slice-Methode direkt von diesem Objekt- Namespace aufrufen. Slice ()

Ich habe eine Referenz gefunden , die mapdirekt in der NodeList von verwendet wird

Array.prototype.map.call(nodelist, fn)

Ich habe es nicht getestet, aber es scheint plausibel, dass dies schneller sein würde, da es direkt auf die NodeList zugreifen sollte.

Wie wäre es damit:

// Be evil. Extend the prototype.
if (window.NodeList && !NodeList.prototype.filter) {
  NodeList.prototype.filter = Array.prototype.filter;
}

// Use it like you'd expect:
const noClasses = document
  .querySelectorAll('div')
  .filter(div => div.classList.length === 0)

Es ist der gleiche Ansatz wie in den MDN-Dokumenten für NodeList.forEach (unter 'Polyfill') erwähnt. Er funktioniert für IE11 , Edge, Chrome und FF.