JavaScript-Array: Gruppierung zusammengehöriger Elemente

Wie jede andere objektorientierte Programmiersprache bietet auch JavaScript viele Funktionen und Objekte zur Softwareentwicklung. In JavaScript ist fast alles ein Objekt, und jedes davon hat seine eigenen Vorteile. Eines der am häufigsten verwendeten Objekte in JavaScript ist zum Beispiel ein Array.

In diesem Artikel wird das Konzept von JavaScript-Arrays, ihre Syntax, ein Array-Element und die Manipulation von Arrays in Ihrer Software erläutert. Am Beispiel eines hypothetischen Browserspiels erfahren Sie außerdem, wie Sie Arrays und Array-Methoden in der Praxis einsetzen können.

• Was ist ein JavaScript-Array?
• Wie schreibt man ein funktionierendes JavaScript-Array?
• JavaScript-Array-Elemente
• JavaScript-Array-Beispiel

Wenn Sie mit JavaScript nicht vertraut sind oder Ihre Kenntnisse auffrischen möchten, finden Sie in diesem Artikel grundlegende Informationen über JavaScript und dessen Verwendung.

Was ist ein JavaScript-Array?

JavaScript-Arrays sind Listen, die geordnete Daten speichern und über einen Index zugänglich machen. Sie können verschiedene Datenarten wie Zahlen, Strings oder Objekte speichern und erlauben das Hinzufügen, Entfernen und Ändern von Elementen. Arrays sind äußerst flexibel und vielseitig einsetzbar und erleichtern die Verarbeitung und Manipulation von Daten.

Wie schreibt man ein funktionierendes JavaScript-Array?

Diese Frage lässt sich leider nicht ganz eindeutig beantworten. In der Regel entscheidet man je nach Bedarf und achtet darauf, dass man mit seinem Deklarationsstil konsistent bleibt. Werfen wir zunächst einen Blick auf die Syntax für die verschiedenen Möglichkeiten, ein Array zu deklarieren.

JavaScript-Array-Syntax

Es gibt zwei Möglichkeiten, ein JavaScript-Array zu deklarieren und zu initialisieren: Array-Konstruktor und Array-Literal.

Die erste besteht darin, ein Array mit dem Array-Konstruktor zu erstellen. Diese Methode ist weniger gebräuchlich, man sollte sie aber durchaus kennen.

Syntax für einen JavaScript-Array-Konstruktor

 
const array name = new Array(item1, item2, …);

Diese Methode wird von Entwicklerinnen und Entwickler in der Regel dann verwendet, wenn die Werte des Arrays bekannt sind. Ein gutes Beispiel ist die Erstellung neuer Instanzen von Spielenden in einem Spiel. Das Entwicklerteam könnte diesem Konstruktor eine Variable übergeben, die alle eingegebenen Daten der Spieler enthält.

Seit der Veröffentlichung von ECMAScript 6 (ES6) werden Arrays normalerweise mit dem Variablentyp „const“ erstellt, da dieser zuverlässiger und konsistenter ist. Außerdem kann man damit das Array hinterher uneingeschränkt modifizieren.

In JavaScript kann das Schlüsselwort new weggelassen werden, wenn das Array mit dem Array-Konstruktor erstellt wird. Das bedeutet, dass Sie stattdessen ein neues Array mit der folgenden Syntax deklarieren können.

Im obenstehenden Code deklarieren Sie zunächst eine neue Variable const, gefolgt von dem von Ihnen gewählten Namen. Dann wird das neue Array mit dem Array-Konstruktor initialisiert. Anschließend fügen Sie innerhalb der Klammern die Elemente hinzu, die Sie in dem Array speichern möchten. Dies kann eine beliebige Kombination aller Datentypen in JavaScript sein.

JavaScript-Array-Literal

Das Array-Literal in JavaScript ähnelt der Konstruktor-Methode. Der Hauptunterschied besteht in der Verwendung der Klammer-Notation, um ein neues Array mit dem Namen der Variablen, der Sie es zuweisen, zu erstellen und zu initialisieren.

Initialisieren eines leeren Arrays

Die letzte Möglichkeit, ein Array in JavaScript zu erstellen, besteht darin, ein leeres Array zu initialisieren und ihm später im Programm Elemente hinzuzufügen. Die Syntax dafür ist denkbar einfach und vielleicht haben Sie sie sogar schon erraten:

 
const array name = [ ];

Genau! Es ist im Grunde ein Array-Literal, aber ohne zusätzliche Elemente. Mit diesen Informationen im Hinterkopf, sehen wir uns an, was Array-Elemente sind und welche Arten von Elementen erlaubt sind.

JavaScript-Array-Elemente

Array-Elemente sind nichts anderes als Elemente, die in einem Array gespeichert sind. Die Elemente in einem Array sind oft von unterschiedlichem Typ und können daher für robuste Datensätze innerhalb komplexer Strukturen verwendet werden.

Mögliche Elemente in einem Array sind alle Objekte oder Datentypen, die JavaScript unterstützt, wie Strings, Ganzzahlen und Boolesche Werte. JavaScript-Arrays unterstützen auch Datensammlungen als Array-Elemente, d. h. ein Array kann Elemente enthalten, die ebenfalls Arrays sind – sozusagen Arrays von Arrays.

Jetzt, da Sie wissen, welche Datentypen Arrays unterstützen, sehen wir uns an, wie Sie auf diese Daten zugreifen und sie manipulieren können. Anschließend sehen Sie einige Beispiele für die Verwendung von Arrays in einem hypothetischen Browserspiel.

Auf Array-Elemente zugreifen

Um auf ein Array-Element zuzugreifen, muss der Index des gewünschten Array-Elements in Klammern-Notation angegeben werden. Diese Methode ist einfach, hat aber den Nachteil, dass der Array-Index bei Null und nicht bei Eins beginnt.

 
const player = [“Artemis”, 35, “5’11”, “06:23:00”]
Player[0]

Diese Codezeile erstellt ein Array-Literal mit vier Werten und verweist dann auf das erste Element des Arrays mit dem Namen Artemis.

JavaScript-Array Length-Methode

Die Index-Diskrepanz mag unwichtig erscheinen, aber sie verursacht tatsächlich unglaublich viele Fehler beim Programmieren mit JavaScript. Wenn Sie beispielsweise Schleifen oder Iterationen verwenden, müssen Sie immer die Länge des Arrays berücksichtigen. Einfacher geht es mit der JavaScript-Array-Methode Length, die einen Wert für die Länge des Arrays zurückgibt.

 
player.length

Wenn das Array zehn Elemente hat, gibt das Length-Array diesen Wert zurück. Der maximale Index des Arrays wäre jedoch um eins kleiner als dieser Wert. Wenn Sie also mit der Methode „Length()“ eine Schleife für das Array bis zum Ende verwenden würden, müssten Sie vom Wert, den die Methode zurückgibt, ebenfalls eins abziehen.

 
player.length -1

JavaScript-Arrays sortieren

Die Methode sort() dient dazu, die Elemente eines Arrays zu sortieren. Besteht das Array beispielsweise nur aus Zahlen – egal ob String oder Ganzzahl – werden diese mit der Sortiermethode nach ihren numerischen Werten sortiert.

 
player.sort()

Auf der Mozilla-Entwicklerseite heißt es: „Die Standardsortierreihenfolge ist aufsteigend und basiert auf der Konvertierung der Elemente in Strings und dem anschließenden Vergleich ihrer Sequenzen von UTF-16-Codeeinheitenwerten.“

Die Verwendung der „sort()“-Methode kann zu unvorhersehbaren Ergebnissen führen, wenn sie falsch angewendet wird. Im Großen und Ganzen bietet sie jedoch eine einfache Möglichkeit, grundlegende Sortier-Techniken anzuwenden. In den meisten grundlegenden Anwendungen verhält sich die Methode „sort“ so, wie Sie es erwarten würden.

JavaScript-Array-Beispiel

Als Nächstes sehen Sie ein CodePen-Beispiel, das zeigt, wie Sie Arrays erstellen, mit ihnen interagieren und sie sogar modifizieren können. In diesem CodePen sehen Sie auch ein Beispiel für eine Array-Schleife mit der Length-Methode. Der CodePen ist außerdem interaktiv. Sie können also mit dem Code spielen und sich mit dem Thema Arrays vertraut machen.

Siehe JavaScript-Arrays Pen von HubSpot (@hubspot) auf CodePen.

Die array.filter()-Methode baut auf den Informationen dieses Beitrags auf und bietet Ihnen einen tieferen Einblick in die Arbeit mit Arrays.

Zuletzt sehen wir uns noch ein Videobeispiel für JavaScript-Arrays und ihre Verwendung an. Das Video enthält eine Einführung in die Grundlagen und hilft Ihnen, die wesentlichen Konzepte von JavaScript-Arrays zu verstehen.

Erste Schritte mit JavaScript-Arrays

Sie haben viel über JavaScript-Arrays gelernt, wie sie funktionieren und wie Sie sie in Ihrer Programmierung verwenden können. Sie haben auch etwas über das Verhalten von Arrays und einige Array-Methoden erfahren. Außerdem haben Sie auch die Syntax von JavaScript-Arrays kennengelernt und Beispiele für Arrays gesehen.

Sie hatten sogar die Möglichkeit, mit einem Live-Codebeispiel zu experimentieren, das die in diesem Artikel behandelten Themen abdeckt. Sie können auf diesen Informationen aufbauen, indem Sie verschiedene Verwendungsmöglichkeiten von Arrays und verschiedene Arten der Manipulation, Bearbeitung und sogar der Anzeige von Array-Informationen im Browser üben.

Titelbild: AnnaStills / iStock / Getty Images Plus