Quelltext der Seite JavaScript/Objekte/Array

Wechseln zu: Navigation, Suche
Sie sind nicht berechtigt, die Seite zu bearbeiten. Grund:
Diese Aktion ist auf Benutzer beschränkt, die der Gruppe „Benutzer“ angehören.
Sie können den Quelltext dieser Seite betrachten und kopieren:
Mit dem eingebauten Konstruktor '''Array''' können [[JavaScript/Array|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.

{{3Spalten|
'''Prototyp'''
* [[JavaScript/Objekte/Function/prototype|Function.prototype]]


'''Eigenschaften'''
* [[JavaScript/Objekte/Function/length|length]]
* [[JavaScript/Objekte/Function/name|name]]
* [[JavaScript/Objekte/Array/prototype|prototype]]


'''Methoden'''
* [[JavaScript/Objekte/Array/from|from]]
* [[JavaScript/Objekte/Array/isArray|isArray]]
* [[JavaScript/Objekte/Array/of|of]]
* [[JavaScript/Objekte/Symbol/species|@@species]]


|
'''Eigenschaften des Prototyps'''
* [[JavaScript/Objekte/Array/constructor|constructor]]


'''Methoden des Prototyps'''
* [[JavaScript/Objekte/Array/concat|concat]]
* [[JavaScript/Objekte/Array/copyWithin|copyWithin]]
* [[JavaScript/Objekte/Array/entries|entries]]
* [[JavaScript/Objekte/Array/every|every]]
* [[JavaScript/Objekte/Array/fill|fill]]
* [[JavaScript/Objekte/Array/filter|filter]]
* [[JavaScript/Objekte/Array/find|find]]
* [[JavaScript/Objekte/Array/findIndex|findIndex]]
* [[JavaScript/Objekte/Array/forEach|forEach]]
* [[JavaScript/Objekte/Array/includes|includes]]
* [[JavaScript/Objekte/Array/indexOf|indexOf]]
* [[JavaScript/Objekte/Array/join|join]]

|
* [[JavaScript/Objekte/Array/keys|keys]]
* [[JavaScript/Objekte/Array/lastIndexOf|lastIndexOf]]
* [[JavaScript/Objekte/Array/map|map]]
* [[JavaScript/Objekte/Array/pop|pop]]
* [[JavaScript/Objekte/Array/push|push]]
* [[JavaScript/Objekte/Array/reduce|reduce]]
* [[JavaScript/Objekte/Array/reduceRight|reduceRight]]
* [[JavaScript/Objekte/Array/reverse|reverse]]
* [[JavaScript/Objekte/Array/shift|shift]]
* [[JavaScript/Objekte/Array/slice|slice]]
* [[JavaScript/Objekte/Array/some|some]]
* [[JavaScript/Objekte/Array/sort|sort]]
* [[JavaScript/Objekte/Array/splice|splice]]
* [[JavaScript/Objekte/Array/toLocaleString|toLocaleString]]
* [[JavaScript/Objekte/Array/toSorted|toSorted]]
* [[JavaScript/Objekte/Array/toString|toString]]
* [[JavaScript/Objekte/Array/unshift|unshift]]
* [[JavaScript/Objekte/Array/values|values]]
}}

__TOC__

'''Syntax'''

{|
|<code>Array()</code>
|erzeugt ein leeres Array
|-
|<code>Array(länge)</code>
|Erzeugt ein Array mit ''länge'' leeren Elementen
|-
|<code>Array(...elemente)</code>
|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. 

{{Beispiel|
{{BeispielCode|
<syntaxhighlight lang="javascript">
const empty = new Array;

console.log(empty.length);    // Ausgabe: 0
</syntaxhighlight>
}}}}

Array wird durch den Operator [[JavaScript/Operatoren/new|new]] als Konstruktor aufgerufen. Wird <code>new</code> verwendet, ist die Angabe von Funktionsklammern hinter <code>Array</code> 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 [[Error|RangeError]] aus. 

{{Beispiel|
{{BeispielCode|
<syntaxhighlight lang="javascript">
const array = Array(4);					// Aufruf diesmal ohne new
console.log(array.length);              // Ausgabe: 4
console.log(array[1]]);                 // Ausgabe: undefined
</syntaxhighlight>
}}}}

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 <code>undefined</code>. 

=== 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 [[#Array-Literale|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.

{{Beispiel|
{{BeispielCode|
<syntaxhighlight lang="javascript">
const list = Array(16, 32, 64);

console.log(list.length);    // Ausgabe: 3
console.log(list[2]);        // Ausgabe: 64
</syntaxhighlight>
}}}}

{{Empfehlung|Verwenden Sie diese Aufrufvariante nicht. Nutzen Sie statt dessen Arrayliterale, oder eine der mit ECMAScript 2015 hinzugefügten Methoden [[JavaScript/Objekte/Array/from|Array.from]] und [[JavaScript/Objekte/Array/of|Array.of]]. Diese Methoden haben Zusatzfunktionalität, die mit einem Arrayliteral nicht erzielt werden kann.}}

=== Leere Arrayeinträge ===

Zu beachten ist, dass ein leerer Arrayeintrag und ein Eintrag mit dem Wert <code>undefined</code> nicht das Gleiche sind. Leere Einträge belegen keinen Speicher, <code>undefined</code>-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 <code>undefined</code>.

Der Unterschied ist also: Ein leeres Array ist ein Objekt ohne Eigenschaften. Ein Array mit 1000 <code>undefined</code>-Einträgen ist ein Objekt mit 1000 Eigenschaften!

{{Beispiel|
{{BeispielCode|<syntaxhighlight lang="js">
// *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...]
</syntaxhighlight>
}}}}

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 <code>fill</code>-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.

{{Beispiel|
{{BeispielCode|
<syntaxhighlight lang="javascript">
const empty = [ ];

const list = ['alpha', 'omega'];

const numbers = [5.8];
</syntaxhighlight>
}}}}

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 [[JavaScript/Objekte/Array/of|Array.of]] oder [[JavaScript/Objekte/Array/of|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).

{{Beispiel|
{{BeispielCode|
<syntaxhighlight lang="javascript">
const array = [ , 1, , , 4, ];
console.log(array);      // Ausgabe: (5) [ leer, 1, leer × 2, 4 ]
</syntaxhighlight>
}}}}

Haben Sie nachgezählt? Wieso hat das Array nur 5 Elemente? Bei 5 Kommas sollten es doch 6 werden, hinter der 4 fehlt ein <code>leer</code>, 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 [[JavaScript/Objekte/Array/push|push]]-Methode nacheinander anzuhängen.

Sodann können Sie von Array Subklassen ableiten (siehe [[JavaScript/Tutorials/OOP/Klassen_und_Vererbung|Klassen und Vererbung]]) und hier dient die Konstruktorfunktion als Ankerpunkt für die Subklassen.

== Weblinks ==
* MDN: [https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array Array]
* ECMAScript-Spezifikation: [https://tc39.es/ecma262/2024/multipage/indexed-collections.html#sec-indexed-collections Array-Objekte]

{{Kategorie|JavaScript|Array}}
Folgende Vorlagen werden auf dieser Seite verwendet:
Vorlage:3Spalten (Quelltext anzeigen)
Vorlage:Beispiel (Quelltext anzeigen) (schreibgeschützt für unangemeldete und neue Benutzer)
Vorlage:BeispielCode (Quelltext anzeigen) (schreibgeschützt für unangemeldete und neue Benutzer)
Vorlage:Empfehlung (Quelltext anzeigen) (schreibgeschützt für unangemeldete und neue Benutzer)
Vorlage:Kategorie (Quelltext anzeigen) (schreibgeschützt für unangemeldete und neue Benutzer)
Zurück zur Seite JavaScript/Objekte/Array.
Abgerufen am 4.01.2026
von "http://wiki.selfhtml.org/wiki/JavaScript/Objekte/Array"
Quelltext der Seite JavaScript/Objekte/Array

Navigationsmenü

SELFHTML

Meine Werkzeuge

Namensräume

Varianten

Ansichten

Mehr

Suche

Starten

Werkzeuge

Mitmachen
