20.10.20 5290 Views 5

credit: ©Siarhei

JavaScript Tutorial #10

Arrays in JavaScript

Arrays zählen in JavaScript zu den vordefinierten Standardobjekten. Sie ermöglichen das Speichern von logisch zusammengehörenden Daten in einer übergeordneten Datenstruktur. Wie wird ein Array erstellt und benutzt? Welche Besonderheiten gibt es? Wir zeigen es Ihnen.

Falconbyte unterstüzen

Betrieb und Pflege von Falconbyte brauchen viel Zeit und Geld. Um dir auch weiterhin hochwertigen Content anbieten zu können, kannst du uns sehr gerne mit einem kleinen "Trinkgeld" unterstützen.

Schnelles Code-Beispiel

//Standard-Array von Ganzzahlen erstellen
var meinArray = [10, 20, 30, 40];

//Einzelne Elemente von meinArray ausgeben:
console.log(meinArray[0]); // 10
console.log(meinArray[1]); // 20
console.log(meinArray[2]); // 30
console.log(meinArray[3]); // 40

    Inhaltsverzeichnis

  1. Was ist ein Array?
  2. Wie erstellt man ein Array?
  3. Auf einzelne Elemente zugreifen
  4. Die Länge eines Arrays
  5. Arrays und Schleifen
  6. Methoden von Arrays
  7. Zweidimensionale Arrays
  8. Übungen

Was ist ein Array?

Ein Array - im Deutschen auch Feld genannt - ist programmiertechnisch ein Objekt. Es ist darüber hinaus eine Datenstruktur, die dazu dient, logisch zusammenpassende Elemente in einer gemeinsamen Sammlung zu speichern. Einfache Beispiele hierfür sind etwa die 6 Lottozahlen, eine Namens-Liste von Mitarbeitern oder eine Reihe von Wahrheitswerten.

Die einzelnen Elemente eines Arrays können aber auch von unterschiedlichen Datentypen gemischt sein (Number, String, boolean,...).

Die Elemente eines Arrays sind durchnummeriert, wobei das erste Element immer bei 0 beginnt. Die Nummer eines Elements wird als Index bezeichnet (Plural: Indices) und kann als eindeutige Adresse eines Elements im Array verstanden werden:

JavaScript Array Elemente

In diesem Beispiel sehen wir eine visuelle Veranschaulichung eines Arrays mit sechs Zahlen. Das erste Element (20) hat den Index 0, das zweite (3) den Index 1, das dritte (-4) den Index 2 usw.

Wie erstellt man ein Array?

Greifen wir das Beispiel von eben einmal konkret auf und erstellen ein Array mit sechs Zahlen:

var zahlenArray = new Array(20, 3, -4, 9.1, 0.1, 7);

Das gesamte Array wird dann in einer Variablen (hier zahlenArray) gespeichert, über welche wir auf das Array zugreifen können.

Da es sich bei einem Array um ein Objekt handelt, können wir es mit dem new-Operator erzeugen. In den runden Parameterklammern werden die einzelnen Elemente des Arrays festgelegt.

Allerdings können wir uns die Sache auch einfacher machen. Denn es gibt für Arrays in JavaScript keine Notwendigkeit, diese mit dem new-Operator zu erstellen. Nutzen Sie stattdessen diese übersichtlichere Schreibweise:

var zahlenArray = [20, 3, -4, 9.1, 0.1, 7];

Die einzelnen Elemente werden so kommasepariert innerhalb von zwei eckigen Klammern ohne new-Operator geschrieben.

Auf einzelne Elemente zugreifen

Wie lesen wir einzelne Elemente eines Arrays aus oder - mit anderen Worten - wie picken wir ein Element aus dem Array heraus?

Um einzelne Elemente eines Arrays auszulesen, schreiben wir den entsprechenden Index in eckigen Klammern hinter den Arraynamen. Die folgende Tabelle gibt uns eine Übersicht über die Index-Positionen und Elemente für das Array zahlenArray:

Index Zugriff Element
0 zahlenArray[0] 20
1 zahlenArray[1] 3
2 zahlenArray[2] -4
3 zahlenArray[3] 9.1
4 zahlenArray[4] 0.1
5 zahlenArray[5] 7

Im konkreten JavaScript-Einsatz rufen wir die einzelnen Elemente so auf:

console.log(zahlenArray[0]); // 20
console.log(zahlenArray[1]); // 3
console.log(zahlenArray[2]); // -4
console.log(zahlenArray[3]); // 9.1
console.log(zahlenArray[4]); // 0.1
console.log(zahlenArray[5]); // 7

Das gesamte Array erhalten wir übrigens, wenn wir einfach den Variablennamen (ohne eckige Klammern) notieren. Alle Elemente (inklusive der Größe) werden dann in Form eines Strings zurückgegeben:

console.log(zahlenArray); // [20, 3, -4, 9.1, 0.1, 7] (6)

Elemente ändern

Da wir nun wissen, wie wir Elemente eines Arrays auswählen, können wir sie auch mit neuen Werten überschreiben.

Ändern wir doch beispielsweise das vierte Array-Element (Index 3):

console.log(zahlenArray[3]); // 9.1
zahlenArray[3] = 10;
console.log(zahlenArray[3]); // 10

Die Länge eines Arrays

Die Anzahl der enthaltenen Elemente eines Arrays liefert die Eigenschaft length zurück. Da die Index-Nummerierung aufsteigend bei 0 beginnt, ist die Länge eines Arrays immer der die letzte Indexnummer + 1:

console.log(zahlenArray.length); // 6

Wenn versucht wird, eine Index-Position abzufragen, welche außerhalb des Arrays liegt, dann wird undefined zurückgegeben.

console.log(zahlenArray[6]); // undefined

Das Element zahlenArray[6] ist in unserem Beispiel schlicht nicht existent. Das letzte Element hat immer die Index-Position length - 1. In unserem Beispiel ist dies 5.

Arrays und Schleifen

Die Eigenschaft length wird häufig zur Steuerung von Schleifen eingesetzt:

for(var i = 0; i < zahlenArray.length; i++){
    document.write(zahlenArray[i] + " ");
}

Wir setzen hier die for-Schleife ein. Der Startwert der Schleifenvariablen i ist 0 und er wird nach jedem Schleifendurchlauf um +1 erhöht. Die Schleifenbedingung lautet i < zahlenArray.length. Das heißt: Die Schleife wird solange wiederholt, wie i kleiner als die Größe des Arrays ist.

Auf diese Weise nimmt die Schleifenvariablen bei jedem Schleifendurchlauf nacheinander einen der gültigen Index-Werte an. Somit können wir alle Elemente eines Arrays auswählen.

Am Bildschirm werden so alle Elemente angezeigt:

20 3 -4 9.1 0.1 7

Methoden von Arrays

Das Array-Objekt stellt in JavaScript viele nützliche Methoden bereit. Diese machen uns eine tiefgreifendere Arbeit mit Arrays einfach und praktisch. Hier zunächst ein Überblick:

Methode Einsatzzweck
join() erzeugt eine Zeichenkette aus allen Array-Elementen
pop() entferntdas letzte Element im Array
shift() entfernt das erste Element im Array
push() fügt neue Elemente am Ende des Arrays ein
unshift() fügt neue Elemente am Anfang des Arrays ein
splice() Hinzufügen oder Entfernen von Elementen an beliebiger Index-Position
fill() füllt ein Array mit einem bestimmten Wert
sort() sortiert das Array (numerisch aufsteigend bzw. alphabetisch)
reverse() dreht die Reihenfolge der Elemente eines Arrays um
concat() zum Verbinden von zwei Arrays
slice() erzeugt ein neues Array aus einer Teilmenge eines Ausgangsarrays

Nun sehen wir uns die Methoden im konkreten Code-Einsatz an:

join()

Die Methode join() konvertiert alle Elemente eines Arrays in einen String:

var obst = ["Apfel", "Birne", "Banane", "Orange"];
var x = obst.join(); // "Apfel,Birne,Banane,Orange"

pop()

Die pop()-Methode entfernt das letzte Element eines Arrays:

var obst = ["Apfel", "Birne", "Banane", "Orange"];
obst.pop(); // entfernt das letzte Element ("Orange")

Der Rückgabewert der Methode ist übrigens das aus dem Array entferne Element:

var obst = ["Apfel", "Birne", "Banane", "Orange"];
var x = obst.pop(); // x hat den Wert "Orange"

shift()

Auch shift() entfernt ein Element aus einem Array - allerdings nicht das letzte, sondern das erste. Alle verbleibenden Elemente werden dadurch um eine Index-Position nach vorn gesetzt:

var obst = ["Apfel", "Birne", "Banane", "Orange"];
obst.shift(); // entfernt "Apfel"

Die shift()-Methode liefert das entfernte Element zurück.

var obst = ["Apfel", "Birne", "Banane", "Orange"];
var x = obst.shift(); // x hat den Wert "Apfel"

push()

Mit der push()-Methode fügen wir neue Elemente an das Ende des Arrays hinzu:

var obst = ["Apfel", "Birne", "Banane", "Orange"];
obst.push("Kiwi"); // Fügt "Kiwi" an das Ende des Arrays hinzu

Mehrere neue Elemente können kommasepariert übergeben werden.

Die Methode liefert die neue Länge des Arrays zurück:

var obst = ["Apfel", "Birne", "Banane", "Orange"];
var x = obst.push("Kiwi"); // x hat den Wert 5

unshift()

Mit unshift() fügen wir neue Elemente an den Beginn des Arrays hinzu.

var obst = ["Apfel", "Birne", "Banane", "Organge"];
obst.unshift("Kiwi"); // Fügt "Kiwi" an den Anfang des Array hinzu

Mehrere neue Elemente werden kommasepariert übergeben.

Der Rückgabewert der Methode ist die neue Array-Länge:

var obst = ["Apfel", "Birne", "Banane", "Orange"];
var x = obst.unshift("Kiwi"); // x hat den Wert 5

splice()

Mit der splice()-Methode können Elemente flexibel mitten im Feld hinzugefügt oder entfernt werden. Das Array wird entsprechend verändert:

var obst = ["Apfel", "Birne", "Banane", "Orange"];
obst.splice(2, 0, "Kiwi", "Ananas"); // "Apfel", "Birne", "Kiwi", "Ananas", "Banane", "Orgnge"

Die Methode besitzt drei Parameter, die folgende Funktion haben:

  • erster Parameter: Index-Position, an der Elemente hinzugefügt/ entfernt werden sollen.
  • zweiter Parameter: Die Anzahl der zu entfernenden Elemente. Bei 0 wird kein Element entfernt.
  • dritter Paramter: Liste der Elemente (kommasepariert), die dem Array hinzugefügt werden sollen.

fill()

Die fill()-Methode ist praktisch, um alle Elemente eines Arrays mit einem bestimmten Wert zu füllen:

var obst = ["Apfel", "Birne", "Banane", "Orange"];
obst.fill("Zitrone"); // "Zitrone", "Zitrone", "Zitrone", "Zitrone"

Nun haben alle vier Array-Elemente den Wert "Zitrone".

Es ist aber auch möglich, eine Range für die Füllung festzulegen:

var obst = ["Apfel", "Birne", "Banane", "Orange"];
obst.fill("Zitrone", 0, 2); // "Zitrone", "Zitrone", "Banane", "Orange"

Nun werden nur die ersten beiden Indices mit dem Wert "Zitrone" belegt. Entscheidend hierfür ist der (optionale) zweite und dritte Parameter:

  • erster Parameter: Gibt das Element an, mit dem gefüllt werden soll.
  • zweiter Parameter: Gibt den Startindex an, ab dem gefüllt werden soll.
  • dritter Paramter: Gibt den Index an, bei dem die Fülling gestoppt werden soll. 2 würde bedeuten, dass ab Index 2 keine Füllung mehr erfolgt.

sort()

Um ein Array alphabetisch bzw. numerisch zu sortieren, steht die praktische Methode sort() zur Verfügung:

var obst = ["Birne", "Apfel", "Banane", "Organge"];
obst.sort(); // Apfel, Banane, Birne, Orange

reverse()

Mit reverse() drehen wir die Elemente eines Arrays einfach um:

var obst = ["Apfel", "Birne", "Banane", "Orange"];
obst.reverse(); // Orange, Banane, Birne, Apfel

concat()

Die concat()-Methode wird genutzt, um zwei (oder mehr) Arrays miteinander zu verbinden. Dabei werden die Ursprungsarrays nicht verändert, sondern es wird ein neues Array als Ergebnis der Verbindung zurückgeliefert:

var obst = ["Apfel", "Birne", "Banane", "Orange"]; // Array 1
var gemuese = ["Kürbis", "Paprika", "Tomate"]; // Array 2

var gesamt = obst.concat(gemuese); // Array 1 + Array 2
// "Apfel", "Birne", "Banane", "Orange", "Kürbis", "Paprika", "Tomate"

slice()

Um eine Teilmenge eines Arrays zu kopieren, kann die Methode slice() genutzt werden. Diese liefert ausgewählte Elemente eines Arrays als neues Array-Objekt zurück:

var obst = ["Apfel", "Birne", "Banane", "Orange"];
var obst2 = obst.slice(2, 4); // "Banane", "Orange"

Die Methode hat zwei Parameter, die den Auswahlbereich festlegen:

  • erster Parameter: Index-Position, an der die Auswahl beginnen soll.
  • zweiter Parameter: Index-Position, vor der die Auswahl enden soll. Falls dieser Wert ausgelassen wird, wird bis zum Ende des Arrays kopiert.

Zweidimensionale Arrays

Bisher haben wir nur mit eindimensionale Arrays gearbeitet. Für komplexere Datenstrukturen genügt das aber oftmals nicht. Wir werden es dann mit mehrdimensionalen Arrays zu tun bekommen.

  • Ein mehrdimensionales Array ist ein Array, dessen Elemente wiederum Arrays sind.

Da vor allem zweidimensionale Arrays recht häufig vorkommen, schauen wir uns diese jetzt mal genauer an.

Stellen Sie sich ein zweidimensionales Array als eine Art Gitter mit Koordinaten vor.

JavaScript mehrdimensionale Arrays

Wie man sieht, besteht ein zweidimensionales Array aus einer Reihe von untergeordneten Einzelarrays ("Subarrays"). Diese wiederum halten jeweils einzelne Elemente.

Erstellen wir nun mit JavaScript ein kleines zweidimensionales Array für Number-Werte:

var multiArray = [ [1, 2, 3], [-1, -2, -3] ];

Wir sehen im Beispiel, dass es eine äußere Klammer gibt - diese markiert das "Hauptarray". Es besitzt zwei durch Komma getrennte Elemente. Diese Elemente wiederum sind auch Arrays mit eigenen Elementen (nämlich jeweils drei Number-Werten).

JavaScript mehrdimensionale Arrays

Die Auswahl der einzelnen Elemente der Subarrays erfolgt mit jeweils zwei eckigen Klammern - und zwar so:

console.log(multiArray[0][0]); // 1
console.log(multiArray[0][1]); // 2
console.log(multiArray[0][2]); // 3
console.log(multiArray[1][0]); // -1
console.log(multiArray[1][1]); // -2
console.log(multiArray[1][2]); // -3

Mit der ersten Klammer wählen wir das entsprechende Subarray aus. Die zweite Klammer dahinter das jeweilige Elemente inenrhalb des Subarrays. Und nicht vergessen: Die Zählung bginnt immer bei Index 0!

Übungen

einfach

Erstellen Sie ein Array mit sechs Ganzzahlen zwischen 1 und 9. Fügen Sie in der nächsten Programmzeile drei weitere Ganzzahlen (ebenfalls zwischen 1 und 10) hinzu.

Sortieren Sie nun das Array und geben Sie es auf der Konsole aus.

Lösung ein-/ausblenden

mittel

Erstellen Sie eine Funktion, die den Nutzer über ein prompt-Eingabefenster zunächst fragt, wie groß ein Array sein soll. Gültig ist eine Größe zwischen 1 und 6.

Anschließend wird er durch weitere Eingabefenster aufgefordert, die einzelnen Array-Elemente einzugeben.

Am Ende sollen die Array-Elemente am Bildschirm angezeigt werden.

Lösung ein-/ausblenden

schwer

Erzeugen Sie ein zweidimensionales Array. Das Hauptarray beinhaltet 8 Subarrays mit jeweils 8 Elementen (jedes Element soll ein "x" sein).

Stellen Sie das zweidimensionale Array anschließend so am Bildschirm dar:

Wie ändern wir einzelne Elemente in "z" ab? Zum Beispiel das dritte aus der vierten Reihe?

Lösung ein-/ausblenden

Java lernen

text text

PHP Lernen

zur PHP

JavaScript lernen

move nove move

FALCONBYTE.NET

Handmade with 🖤️

© 2018-2023 Stefan E. Heller

Impressum | Datenschutz | Changelog

Falconbyte Youtube Falconbyte GitHub facebook programmieren lernen twitter programmieren lernen discord programmieren lernen