Statische Array-Methoden Array.from(), Array.isArray (), Array.of ()

Sieht aus wie ein Array

Statische Array-Methoden werden nicht auf dem jeweiligen Array aufgerufen, sondern auf dem Array-Objekt (so wie Math ein statisches Objekt ist). Sie fangen also mit Array. (Array Punkt) an.

Im DOM treffen wir z.B. auf HTMLCollections und NodeLists – Sammlungen und Listen –, die aussehen wie ein Array, deren Elemente einen Index und eine length-Eigenschaft wie ein Array haben, die aber kein Array sind.

console.log (document.images);

console.log (document.querySelectorAll ("img"));

HTMLCollection [<img>, <img>, <img>] (3)
NodeList [<img>, <img>, <img>] (3)

Array.from() erzeugt ein neues flaches Array

Die DOM-Methode querySelectorAll (".elem") erzeugt eine NodeList, aber eine Nodelist hat weniger Eigenschaften als ein Array. Eine NodeList ähnelt zwar einem Array und hat auch einen Index, aber unterstützt keine Array-Methoden höherer Ordnung wie forEach, filter oder map und selbst einfache Array-Methoden wie array.splice oder array.push können nicht auf NodeLists angewendet werden. Array.from () erstellt eine neue, flach kopierte (shallow) Array-Instanz aus einem iterierbaren oder Array-ähnlichen Objekt.

Array.from () gibt ein Array aus einer iterierbaren Liste zurück.

const elems = document.querySelectorAll(".js");
const arr = Array.from(elems);
const newArr = arr.splice(2, 5);

Array.from Praxisbeispiel

HTML-Tabellen begegnen uns nicht mehr sehr oft, denn sie sind kein einfache Fall für die kleinen Monitore der mobilen Geräte. Für eine einfache Umwandlung in die mobile-freundliche Darstellung als »Card« müssen zeilenorientierte Tabellen umgewandelt werden: Zeilen zu Spalten, Spalten zu Zeilen.

<table class="cards">
	<tr>
		<th>Tonvase Melissa</th>
		<th>Kugelvase »The Bowl«</th>
		<th>Cracked Porzelan</th>
		<th>Tonvase Lungo</th>
	</tr>
	<tr>
		<td><img src="fleur-01.webp" …></td>
		<td><img src="fleur-02.webp" …></td>
		<td><img src="fleur-07.webp" …></td>
		<td><img src="fleur-08.webp" …></td>
	</tr>
	…
</table>

Tonvase Melissa	Kugelvase »The Bowl«	Cracked Porzelan	Tonvase Lungo
████	████	████	████
28 cm	24 cm	42 cm	32 cm
€ 24,80	€ 16,20	€ 43,90	€ 35,40

Das Script liest mit Array.from(table.querySelectorAll("tr")) die Zeilen der HTML-Tabelle in die konstante Variable rows. Eine neue Tabelle newTable bekommt für jede Zeile des Originals eine Spalte.

function transposeTable() {
	const table = document.querySelector(".cards");
	const rows = Array.from(table.querySelectorAll("tr"));

	const newTable = document.createElement("table");
	const maxCols = rows[0].children.length; // Max Spalten
	
	// Schleife durch die Anzahl der Spalten
	for (let i = 0; i < maxCols; i++) {
		const newRow = document.createElement("tr");
		
		// Schleife über jede Zeile, um die entsprechende Spalte zu extrahieren
		rows.forEach(row => {
			const cell = row.children[i];
			if (cell) {
				const newCell = document.createElement(row.rowIndex === 0 ? "th" : "td");
				newCell.innerHTML = cell.innerHTML;
				newRow.appendChild(newCell);
			}
		});
		newTable.appendChild(newRow);
	}
	
	// Original durch die neue Tabelle ersetzen
	table.parentNode.replaceChild(newTable, table);
	newTable.classList.add("transposed");
}
transposeTable();

So kommt die lineare Ordnung in die Inhalte der Tabelle.

<table class="transposed">
	<tr>
		<th>Tonvase Melissa</th>
		<td><img src="fleur-01.webp" …></td>
		<td>28 cm</td>
		<td>€ 24,80</td>
	</tr>
	<tr>
		<th>Kugelvase »The Bowl«</th>
		<td><img src="fleur-02.webp" …></td>
		<td>24 cm</td>
		<td>€ 16,20</td>
	</tr>
	…
</table>

Array.isArray() – ist die Variable ein Array?

Array.isArray (value) prüft, ob ein Element ein Array ist. In JavaScript wird der Typ einer Variablen nicht ausdrücklich vereinbart und kann jederzeit geändert werden. typeof stellt zwar fest, ob ein Operator vom Typ Number oder String, Object oder Boolean ist. typeof ist keine Methode, sondern ein Operator (wie z.B. ein "+"). Das Ergebnis von typeof ist ein String.

Arrays sind Objekte – insofern ist die letzte Zeile der Tabelle zwar korrekt, aber nicht hilfreich. Dafür gibt es Array.isArray (value).

const arr = [10, 20, 30];
console.log (typeof arr);
// object

console.log ("Array?", Array.isArray (arr));
// Array? – true

Auch so geht es: Ein Array ist ein Objekt und eine Array-Instanz hat wie jedes Javascript-Objekt eine Konstruktur-Funktion – eben Array.

if (document.images.constructor === Array) {
	console.log ("Eine HTMLCollection ist doch ein Array");
} else {
	console.log ("Eine HTMLCollection doch kein Array!")
}

Array.of ()

Die statische Array-Methode erzeugt eine neue Array-Instanz aus einer beliebigen Zahl von Argumenten, gleich, von welchem Typ die Argument sind.

const dings = Array.of({ 
	option: "foo", 
	lesung: "heute"}, 
	2, 
	'foo', 
	{ zeug: "Spielzeug"}
);
console.log ("dings" , dings)

dings (array-static-methods.html, line 173)
Array (5)
0 {option: "foo", lesung: "heute"}
1 2
2 "foo"
3 ["Pratchett", "Adams"] (2)
4 {zeug: "Spielzeug"}

Der Unterschied zwischen Array.of () und dem Array ()-Konstruktor liegt in der Behandlung der einzelnen Argumente: Während Array.of (12) ein Array mit einem Wert »12« erzeugt, legt new Array (12) ein Array mit einer Länge von 12 an, in dem alle Werte leer sind.

Mehr zu Array.of () auf Mozilla web docs