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
Array.from () erstellt eine neue, flach kopierte (shallow) Array-Instanz aus einem iterierbaren oder Array-ähnlichen Objekt.
JavaScript gibt beim Aufruf der älteren DOM-Methoden wie document.images oder document.forms eine HTMLCollection zurück. Eine HTMLCollection ähnelt einem Array und hat auch einen Index, aber unterstützt keine Array-Methoden höherer Ordnung wie forEach (). Array.from () gibt ein Array aus einer iterierbaren Liste zurück.
const images = Array.from (document.images); images.forEach ((elem) => console.log (elem.src));
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.
| typeof Undefined | "undefined" |
| typeof Null | "object" |
| typeof Boolean | "boolean" |
| typeof Number | "number" |
| typeof String | "string" |
| typeof Object | "object" |
| typeof [10, 20, 30] | "object" |
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