Videos eBook Forum Kontakt

jetzt Videos kaufen
damit HTML lernen ...
...
nicht für die Katz ist

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

JavaScript und das Array – Daten strukturiert speichern

Wir haben bisher Variablen kennen gelernt – schnell taucht natürlich bei dem Thema Array die Frage auf, warum benötigt man überhaupt ein Array, wenn es Variablen gibt?

Erst einmal zu der wichtigsten Frage:

Was ist ein Array?

Ein Array ist eine Sammlung von Daten gespeichert in einer Art „Variablen“ – im Gegensatz zu einer Variablen können wir viele Daten speichern. Nehmen wir an, wir wollen in einer Highscore eines Spieles alle Spielernamen nutzen. Müssten wir das mit einer Variablen lösen, müssten wir im Vorfeld die entsprechende Anzahl an benötigten Variablen anlegen.

let spielername1;
let spielername2;
let spielername3;
…

Was machen wir aber, wenn wir im Vorfeld gar nicht wissen, wie viele Inhalte, sprich wie viele Variablen wir benötigen würden? Hier kommen die ersten Vorteile von dem Einsatz von Arrays zum Vorschein. Wir legen einfach unser Array an und können es dann mit beliebig vielen Daten füllen.

let spielernamen = ["Elke", "Hans", "Meike"];

Oder übersichtlicher:

let spielernamen = [
"Elke", 
"Hans", 
"Meike"
];

Das Array können wir nun in der Konsole einfach ausgeben lassen:

console.log(spielernamen);

Die merkwürdige Art der Nummerierung beim Array

In der Ausgabe der Konsole haben wir schon gesehen, dass das erste Array nicht die Nummer 1 hat, sondern bei 0 anfängt. Arrays werden immer ab 0 durchnummeriert! Das ist extrem wichtig, das im Blick zu haben.

Wollen wir also das erste Element in einem Array ausgeben lassen, dann erfolgt das über den Index 0. Dieser wird nach dem Namen des Arrays in eckigen Klammern angegeben, wie im folgenden Beispiel zu sehen ist.

console.log(spielernamen[0]);

Weitere JavaScript-Funktionen für Arrays

JavaScript bietet uns nun eine ganze Reihe von Funktionen. Ein bestehendes Array können wir auch jederzeit mit weiteren Daten erweitern:

  • push(„Spielername“);
  • unshift(„neuer Spielername“);

Warum gibt es nun 2 Möglichkeiten, um ein Array zu erweitern? Wir können weitere Daten an das Ende (hier mit push) und an den Anfang des Arrays (unshift) hinzufügen.

Und das Gegenstück zum hinzufügen ist Entfernen:

Hier haben wir auch wieder 2 Möglichkeiten: am Anfang und am Ende

  • ARRAY.pop()
  • ARRAY.shift()

Und weg ist der letzte, bzw. der erste Eintrag.

Meisten benötigt man den entfernten Inhalt für irgendeine Aktion – diesen bekommen wir als Rückgabewert bei der Aktion vom Löschen:

let letztereintrag = spielernamen.pop();
console.log(letztereintrag);
let letztereintrag = spielernamen.pop();
console.log(letztereintrag);

Oder vom Anfang der Arrays:

let erstereintrag = spielernamen.unshift();
console.log(erstereintrag);
let erstereintrag = spielernamen.unshift();
console.log(erstereintrag);

Weitere oft bei Arrays benötigte Funktionen

Nachdem wir dem Array nicht einfach ansehen, wie viele Daten in einem Array gespeichert wurden, können wir einfach die Anzahl abfragen. Dazu wird der Array-Name mit der Funktion length verkettet:

console.log(spielernamen.length);

Klar können wir Elemente in den Arrays immer über den Index ansprechen – meistens benötigt man alle Elemente z.B. für eine Ausgabe. Hierzu sind Schleifen notwendig, die wir in einem eigenen Kapitel kennen lernen.