Felder 1
Was sind Felder?
Felder werden verwendet, um mehrere Wert in einer Variablen zu speichern.
Sollen z. B. mehrere Farbinformationen gespeichert werden, so müssten dafür, ohne die Verwendung von Feldern, so viele Variablen angelegt werden, wie Farbinformationen gespeichert werden sollen:
Mit der Verwendung von Feldern ist dazu nur eine Variable erforderlich:
Erstellen von Feldern
Es gibt zwei Möglichkeiten Felder zu erstellen. Die erste Möglichkeit besteht darin, dem Feldnamen die Elemente in eckigen Klammern und durch Komma getrennt anzuhängen:
Die zweite Möglichkeit ist mit dem Schlüsselwort „new“ und der Funktion „Array()“. Auch hier werden die einzelnen Elemente durch Komma getrennt:
HTML-Datei:
Ergebnis:
Beispiel 1
farbe11[0] =
farbe11[1] =
farbe11[2] =
farbe12[0] =
farbe12[1] =
farbe12[2] =
Hinweis: Die Seite w3schools.com empfielt die erste Variante ohne „new“, da diese einfacher, performanter und übersichtlicher ist und das Resultat beider Varianten gleich ist!
Zugriff auf die Feld-Elemente
Der Zugriff auf die Elemente von Feldern erfolgt über einen Index. Bei JavaScript hat, wie bei den meisten Programmiersprachen, das erste Feld-Element den Index „0“. Der Index wird dabei in eckigen Klammern direkt an den Feldnamen angehängt. Darüber ist es möglich, einzelne Elemente eines Feldes auszulesen oder zu ändern. Sollen alle Elemente eines Feldes ausgegeben werden, wird der Feldname ohne eckige Klammern verwendet:
HTML-Datei:
Ergebnis:
Beispiel 2
var farben2 = ["rot", "grün", "blau"];
farben2 =
farben2[0] =
farben2[0] = "violett";
farben2 =
Elemente hinzufügen und entfernen
JavaScript ist sehr tolerant beim Hinzufügen von Feld-Elementen. Hier muss lediglich der Feldname mit dem gewünschten Index angegeben werden, wie bei der Zuweisung eines Wertes zu einem Feld-Element. Diese Toleranz hat aber auch ein gewisses Risiko. Wird ein zu hoher Index angegeben, entsteht eine Lücke zwischen dem letzten und dem neuen Feld-Element:
HTML-Datei:
Ergebnis:
Beispiel 3
var farben3 = ["rot", "grün", "blau"];
farben3 =
farben3[3] = "violett";
farben3 =
farben3[6] = "türkis";
farben3 =
Mit der Funktion „delete“ können einzelne Feld-Elemente aus einem Feld gelöscht werden. Auch hier kann es zu Lücken kommen, wenn Feld-Elemente gelöscht werden, die einen Nachfolger haben:
HTML-Datei:
Ergebnis:
Beispiel 4
var farben4 = ["rot", "grün", "blau", "violett", "türkis"];
farben4 =
delete farben4[4];
farben4 =
delete farben4[2];
farben4 =
Länge von Feldern
Die Länge eines Feldes (Anzahl an Elementen) kann mit Hilfe der Eigenschaft „length“ ermittelt werden:
HTML-Datei:
Ergebnis:
Beispiel 5
var farben5 = ["rot", "grün", "blau"];
farben5 =
farben5.length =
farben5[3] = "violett";
farben5 =
farben5.length =
farben5[6] = "türkis";
farben5 =
farben5.length =
Schleifen über Felder
Schleifen über Felder können mit Hilfe der Eigenschaft „lenght“ in einer For-Schleife oder mit einer For...in-Schleife realisiert werden:
HTML-Datei:
Ergebnis:
Beispiel 6
var farben6 = ["rot", "grün", "blau"];
Mit For-Schleife:
Mit For...in-Schleife:
Unterschiedliche Feld-Elemente
Die Feld-Elemente eines Feldes können in JavaScript auch unterschiedliche Datentypen haben. Feld-Elemente können auch Objekte, Funktionen oder wiederum Felder sein:
HTML-Datei:
Ergebnis:
Beispiel 7
var feld7 = [];
feld7[feld7.length] = "Hallo Welt!";
feld7[feld7.length] = 15e6;
feld7[feld7.length] = true;
feld7 =
typeof(feld7[0]) =
typeof(feld7[1]) =
typeof(feld7[2]) =
Mehrdimensionale Felder
In JavaScript können Felder wiederum Felder enthalten, wodurch sich mehrdimensionale Felder realisieren lassen. Der Zugriff auf die einzelnen Felder erfolgt dann wie auf die Elemente eines eindimensionalen Feldes. Der Zugriff auf die Elemente der einzelnen Felder erfolgt dann, bei zweidimensionalen Feldern, über einen doppelten Index:
HTML-Datei:
Ergebnis:
Beispiel 8
feld2D =
feld2D[0] =
feld2D[1][1] =
Abgrenzung Felder / Objekte
Da JavaScript Felder intern wie Objekte behandelt, gibt es kaum einen Unterschied zwischen Feldern und Objekten. Für Felder werden zahlenbasierende Indexe verwendet und für Objekte meist textbasierende. Außerdem können für Objekten auch Methoden definiert werden.
Um festzustellen, ob eine Variable ein Feld oder ein Objekt ist, kann der „typeof“-Operator nicht verwendet werden, da dieser für Felder ebenso den Typ „object“ liefert. Hier bietet JavaScript mit „Array.isArray(feld)“ die Möglichkeit, eine Variable daraufhin zu prüfen, ob sie ein Feld ist oder nicht:
HTML-Datei:
Ergebnis:
Beispiel 9
var feld9 = ["A","B","C"];
var object9 = {eigenschaft1: "wert1", eigenschaft2: "wert2"};
typeof(feld9) =
Array.isArray(feld9) =
typeof(object9) =
Array.isArray(object9) =
Abschlussübung
Als Abschlussübung kannst du folgende Webseite erstellen, bei der ein zweidimensionales Feld verwendet wird, um Personendaten zu speichern und zwei verschachtelte For...in-Schleifen verwendet werden, um die Personendaten auszugeben:
Personaldaten
Gehe dabei wie folgt vor:
- Verwende als Vorlage die For-Schleife mit der Switch-Anweisung aus Beispiel 8, um die Personendaten in ein zweidimensionales Feld zu speichern
- Verwende zwei ineinander verschachtelte For...in-Schleifen nach folgendem Schema, um die Personendaten in einer Text-Variablen aufzulisten:
for (index1 in feld2D) {
for (index2 in feld2D[index1]) {
text += feld2D[index1][index2] + "<br />";
}
text += "<br />";
} - Gebe die Text-Variable in ein HTML-Element aus
Die Lösung kannst du dir hier herunterladen:
