SELFHTML wird 30 Jahre alt! → Veranstaltungs-Ankündigung.
JavaScript/Objekte/Array
Mit dem eingebauten Konstruktor Array können Arrays erzeugt werden. Das Prototyp-Objekt von Array stellt den größten Teil der eingebauten Funktionalität für Arrays bereit. Der Konstruktor verfügt jedoch auch selbst über einige Methoden, mit denen zum Beispiel geprüft werden kann, ob es sich bei einem bestimmten Wert um ein Array handelt oder nicht.
Eigenschaften des Prototyps
Methoden des Prototyps
Inhaltsverzeichnis
Syntax
Array()
|
erzeugt ein leeres Array |
Array(länge)
|
Erzeugt ein Array mit länge leeren Elementen |
Array(...elemente)
|
Erzeugt ein Array aus den übergebenen Elementen. |
Erzeugung von Arrays
Der Array-Konstruktor hat die besondere Eigenschaft, dass er auch ohne das new-Schlüsselwort genutzt werden kann. In beiden Fällen wird ein neues Array-Objekt erzeugt. Ob und mit welchen Elementen das erzeugte Array initialisiert wird, hängt dabei von den übergebenen Argumenten ab.
Leeres Array
Wird beim Aufruf kein Argument übergeben, dann wird einfach ein leeres Array zurückgegeben.
const empty = new Array;
console.log(empty.length); // Ausgabe: 0
Array wird durch den Operator new als Konstruktor aufgerufen. Wird new verwendet, ist die Angabe von Funktionsklammern hinter Array nicht erforderlich. Da keine Argumente übergeben wurden, wird ein leeres Array erzeugt und zurückgegeben, wie die Ausgabe des Wertes der Eigenschaft length zeigt.
Array mit vorgegebener Länge
Um ein leeres Array mit einer bestimmten Länge zu erzeugen, übergeben Sie die gewünschte Länge als Argument. Der Wert, den Sie übergeben, darf nicht negativ sein und auch keine Nachkommastellen haben, andernfalls löst JavaScript einen RangeError aus.
const array = Array(4); // Aufruf diesmal ohne new
console.log(array.length); // Ausgabe: 4
console.log(array[1]]); // Ausgabe: undefined
Die Einträge dieses leeren Arrays bleiben leer, es wird lediglich die length Eigenschaft gesetzt. Liest man einen dieser Einträge aus, erhält man undefined.
Array mit vorgegebenen Werten
Die dritte Aufrufmöglichkeit besteht darin, dem Konstruktor ein Liste von Werten zu übergeben. Daraus entsteht ein Array, das genau diese Werte enthält. Diese Syntax ist eine „Jugendsünde“ von JavaScript 1.3 aus dem Jahr 1998, als es noch keine Arrayliterale gab.
Deshalb hat in dem Fall, dass Sie nur einen Wert übergeben und es sich dabei um eine Zahl handelt, die Aufrufvariante „Array mit vorgegebener Länge“ Vorrang.
const list = Array(16, 32, 64);
console.log(list.length); // Ausgabe: 3
console.log(list[2]); // Ausgabe: 64
Leere Arrayeinträge
Zu beachten ist, dass ein leerer Arrayeintrag und ein Eintrag mit dem Wert undefined nicht das Gleiche sind. Leere Einträge belegen keinen Speicher, undefined-Einträge hingegen schon. Bei 100 Einträgen ist das irrelevant, bei 10000000 Einträgen sieht das anders aus.
Der Unterschied liegt darin, dass JavaScript-Arrays keine Arrays wie in anderen Sprachen sind, sondern Objekte, die eine gewisse Sonderbehandlung genießen. Wird einem Array an Indexposition 17 ein Wert zugewiesen, bekommt das Arrayobjekt eine Eigenschaft mit dem Namen "17". Greift man auf Indexposition 42 zu, ohne dass diese Position initialisiert wurde, so gibt es die Eigenschaft mit dem Namen "42" nicht und wie bei jedem Zugriff auf eine unbekannte Eigenschaft liefert JavaScript hierfür undefined.
Der Unterschied ist also: Ein leeres Array ist ein Objekt ohne Eigenschaften. Ein Array mit 1000 undefined-Einträgen ist ein Objekt mit 1000 Eigenschaften!
// *1
const array = Array(10000000); // Vorsicht, 10 Millionen ist bereits grenzwertig!
array[3] = 47;
console.log(array.length); // Ausgabe: 10000000
console.log(array); // Ausgabe: (10000000) [leer × 3, 47, leer × 996]
// *2
array.fill(undefined); // Dies dauert einige Zeit!
// *3
console.log(array); // Ausgabe: (10000000) [undefined,undefined,undefined...]
Wenn Sie die diese Befehle in der Konsole der Entwicklerwerkzeuge ausführen, und am Punkt *1 auf den belegten Heap-Speicher schauen (in Chrome-Browsern ist das der Arbeitsspeicher-Tab), dann werden Sie feststellen, dass sich diese Belegung am Punkt *2 kaum geändert, am Punkt *3 aber gewaltig vergrößert hat. Wenn sie 100 Millionen Einträge setzen, kann der fill-Aufruf Minuten dauern und der Browser mehrere Gigabyte Speicher belegen.
Verwendung
Array-Literale
Die Verwendung der Konstruktorfunktion ist im Allgemeinen nicht sinnvoll. Zur Erzeugung von Arrays eignen sich Array-Literale viel besser. Ein Array-Literal besteht aus einem Paar eckiger Klammern, zwischen denen die Elemente, aus denen das Array bestehen soll, durch Komma getrennt notiert werden.
const empty = [ ];
const list = ['alpha', 'omega'];
const numbers = [5.8];
Wie die letzte Variante in dem Beispiel oben zeigt, gibt es hierbei auch keine Probleme, wenn zunächst nur ein Element in dem Array hinterlegt werden soll und dieses Element keine positive Ganzzahl ist, was beim Aufruf des Konstruktors wie gesehen einen Range Error erzeugt hätte. Es ist also anzuraten, für die Erzeugung von Arrays prinzipiell die hier gezeigte Literalschreibweise zu verwenden, oder alternativ die Methoden Array.of oder Array.from.
Auslassungen
Mit Array-Literalen können Sie auch leere Arrayelemente erzeugen, indem Sie sogenannte Auslassungen verwenden (was nichts anderes heißt als: ein Komma, vor oder hinter dem nichts steht).
const array = [ , 1, , , 4, ];
console.log(array); // Ausgabe: (5) [ leer, 1, leer × 2, 4 ]
Haben Sie nachgezählt? Wieso hat das Array nur 5 Elemente? Bei 5 Kommas sollten es doch 6 werden, hinter der 4 fehlt ein leer, oder? Rein formal müsste diese Auslassung ein leeres Arrayelement erzeugen, aber viele Leute haben beim Kopieren von Code ein solches Komma einfach vergessen zu löschen und hatten dann ein Arrayelement mehr als beabsichtigt. Um ihnen zu „helfen“, haben manche Browser das überzählige Komma ignoriert, aber nicht alle. Mit ECMAScript 5 wurde das Ignorierverhalten standardisiert. Wenn Sie tatsächlich durch Auslassen ein leeres Element am Array-Ende haben wollen, müssen Sie zwei Kommas machen.
Braucht man den Konstruktor überhaupt
Manchmal ja. Wenn Sie ein leeres Array mit einer bestimmten Länge erzeugen wollen, benötigen Sie ihn. Der Anwendungsfall "leeres Array mit vorgegebener Länge" ist allerdings nicht sehr häufig. Es ist Stress für die Speicherverwaltung von JavaScript, ein existierendes Array vergrößern zu müssen. Wenn Sie wissen, dass Sie eine große und annähernd bekannte Anzahl von Werten zu einem Array zusammentragen müssen, kann es effizienter sein, das Array vorab anzulegen, statt die Werte mit der push-Methode nacheinander anzuhängen.
Sodann können Sie von Array Subklassen ableiten (siehe Klassen und Vererbung) und hier dient die Konstruktorfunktion als Ankerpunkt für die Subklassen.
Weblinks
- MDN: Array
- ECMAScript-Spezifikation: Array-Objekte
