Verwendung von Array.from() zur Umwandlung von NodeList in ein Array

In JavaScript gibt es zahlreiche Möglichkeiten, mit Dom-Elementen zu interagieren. Eine der nützlichsten Methoden dafür ist die querySelectorAll-Methode. Diese eignet sich hervorragend für das Sammeln von HTML-Elementen, die bestimmten Kriterien entsprechen. Allerdings gibt querySelectorAll eine NodeList zurück und keine Array. Sie fragen sich vielleicht: "Und worin besteht das Problem?".

Nun, auf den ersten Blick wirkt eine NodeList wie ein Array, da sie indexiert und abgerufen werden kann. Tatsächlich sind sie jedoch unterschiedlich, vor allem weil NodeList nicht alle Array-Methoden wie etwa map, filter oder reduce hat.

Betrachten wir das in dem Quiz angegebene Beispiel:

let titleElements = document.querySelectorAll('.article .title'); 
let titles = Array.from(titleElements).map( t => t.textContent ); 
console.log(titles);

In diesem Code wird querySelectorAll verwendet, um alle HTML-Elemente mit den Klassen "article" und "title" auszuwählen. Diese Auswahl erfolgt in Form einer NodeList. Sie möchten aber den Textinhalt aller ausgewählten Elemente erhalten. Hier wäre die map-Funktion sehr nützlich, aber sie steht für NodeList nicht zur Verfügung.

Hier kommt Array.from() ins Spiel. Diese Methode wandelt arrayähnliche Objekte und iterierbare Objekte in Arrays um. Wenn wir Array.from() auf unsere NodeList anwenden, erhalten wir ein richtiges Array, auf welches wir dann die map-Methode anwenden können. In diesem Fall verwenden wir map, um den Textinhalt aus jedem Element zu extrahieren.

Best Practices mit Array.from():

1. Verwenden Sie es, um Iterables und arrayähnliche Objekte in Arrays umzuwandeln. Das ist besonders nützlich, wenn Sie Funktionen wie map, filter, oder reduce verwenden möchten.

2. Erstellen Sie mit Array.from() ein Array mit einer spezifischen Länge und füllen Sie es mit definierten Werten. Beispielsweise können Sie ein Array mit zehn Elementen erstellen und jedes Element auf '0' oder einen anderen Standardwert setzen.

3. Nutzen Sie den zweiten optionalen Parameter von Array.from(), um eine map-Funktion auf jedes Element des erstellten Arrays anzuwenden. So können sie zwei Schritte in einem vereinen.

Die Array.from() Methode ist ein äußerst leistungsfähiges Werkzeug im JavaScript-Toolkit und ermöglicht es Ihnen, auf effiziente Weise flexiblere Datenstrukturen aus Ihren NodeList und iterierbaren Objekten zu erstellen.