Diese Seite dient mir zum üben der Web-Programmiersprachen

Zusammengesetzte Datentypen

Möchte eine Variable mehrere Werte fassen braucht man die zusammengesetzten Datentypen. Sie sind etwar wie eine Liste, auf der die Werte eingetragen werden. Die Liste bekommt einen Namen, mit der Angabe der Position des gewünschten Wertes lässt sich auf diese Liste schließlich zugreifen. Dabei beginnt die Liste immer mit der Position 0


Arrays

Statt mehrere Variablen einzeln zu erstellen wird ein einziger array benutzt. Der Code ist ähnlich wie bei Variablen, nur das man hier eine Eckige Klammer benutzt, inder die Werte eingefasst werden. Mit einem Komma werden die Werte voneinander getrennt. Eine weitere Variante arbeitet mit runden Klammern und setzt den Begriff new Array vor. Das entspricht den Vorgaben für objektorientieres Programmieren.

let arrayName = new Array ();
let arrayName = [];
Hier ein Beispiel, wie statt mehreren Variablen ein array verwendet werden kann:
let farbe1 = "Rot";
let farbe2 = "Grün";
let farbe3 = "Blau";
let farbe = ["Rot", "Grün", "Blau"];

In vielen Programmiersprachen müssen die Elemente eines Arrays den gleichen Datentyp haben, JS erlaubt jedoch die Datentypen zu mischen. So können in einem Array sowohl Zahlen auch auch Texte oder Wahrheitswerte vorhanden sein.
Um ein gesamtes array auszugeben muss nur sein Name verwendet werden, genau wie bei einer einfachen Variable. Um einen einzelen Wert des arrays auszugeben braucht man seine Position, also seine Indexnummer, die immer mit 0 beginnt. Diese Nummer wird in eckigen Klammern neben dem array-Namen geschrieben.

let farbe = ["Rot", "Grün", "Blau"];
alert (farbe[2]);

Hier würde der alert-Befehl als Antwort "Blau" ausgeben. Man kann so auch den Inhalt eines bestimmten Feldes im array ändern.

let farbe = ["Rot", "Grün", "Blau"];
farbe[2] = "Schwarz";
Ergebnis: let farbe = ["Rot", "Grün", "Schwarz"];

Im Gegensatz zu anderen Programmiersprachen kann dem array noch weitere Einträge hinzugefügt werden. Dafür muss man nur dem letzten freien Arrayfeld einen Wert zuweisen.

let farbe = ["Rot", "Grün", "Blau"];
farbe[3] = "Schwarz";
Ergebnis: let farbe = ["Rot", "Grün", "Blau", "Schwarz"];

Array bearbeiten

Um zu verhindern das ausversehen ein Wert überschrieben wird, gibt es die length-Methode. Diese muss durch einen Punkt am Namen des arrays angefügt werden. Mit folgendem Befehl wird dem Array ein Wert hinzugefügt, egal wie lang das array ist.

let farbe = ["Rot", "Grün", "Blau"];
farbe[farbe.length] = "Schwarz";
Ergebnis: let farbe = ["Rot", "Grün", "Blau", "Schwarz"];

Mehrdimensionale Arrays

In mehrdimensionalen arrays bestehen die einzelnen Einträge eines arrays ebenfalls aus arrays. Die Inhalte des untergeordneten arrays werden wieder in eckige Klammern geschrieben. Da dies zu sehr langen und unübersichtlichen Zeilen führen würde, wird das array erst leer initialisiert und schließlich gefüllt.

let farbe = [["Rot", "#F00", "255-0-0"], ["Grün", "#080", "0-128-0"], ["Blau", "#00F", "0-0-255"]];
let farbe = [];
farbe[0] = ["Rot", "#F00", "255-0-0"];
farbe[1] = ["Grün", "#080", "0-128-0"];
farbe[2] = ["Blau", "#00F", "0-0-255"];

Um auf einen einzelnen Wert zuzugreifen braucht es nun zwei eckige Klammern. Zuerst für die Position des übergeordneten arrays, dann die Position des unteres araays. Um den Hex-Code der Farbe Blau auszulesen braucht es hier folgenden Befehl:

document.write (farbe[2][1]);

Map und WeakMap

Eine Map arbeitet nich mit Indexnummern, sondern mit Schlüsselbegriffen. Maps gehören zur objektorientierte Programmierung. Wenn sie deklariert ist, muss sie mit .set befüllt werden. Um den Wert abzurufen verwendet man den Befehl .get

let farbe = new Map();
farbe.set ("Farbe", "Rot");
farbe.set ("Hex", "#F00");
farbe.set ("RGB", "255-0-0");
document.write (farbe.get("Farbe") + "<br>");
document.write (farbe.get("Hex") + "<br>");
document.write (farbe.get("RGB") + "<br>");
Zum Farb-Map Programm

Bei einer WeakMap funktionieren die Methoden clear und size nicht. Sie enthalten auch keine Zahlen oder Zeichenketten als Schlüsselbegriffe, sondern arbeiten mit Objekten.


Set und WeakSet

Ein Set arbeitet weder mit einem Index oder Schlüsselbegriffen. Sie hat keine Ordnung. Um auf die Werte zugreifen zu können muss der Wert selbst genannt werden. Um ein Set zu bearbeiten benutzt man die gleichen Begriffe wie bei der Map. Anders als bei der Map kann in einem Set kein Wert doppelt vorkommen. Dafür kann ein Set die Werte anderer Datenstruckturen importieren. Der Wert wäre dann z.B. ein ganzes array. Dazu muss man den array-Namen in Klammern setzten.

let farbe = ["Rot", "Grün", "Blau"];
let farbeSet = new Set(farbe);

Das WeakSet kann genau wie die WeakMap nur Objekte aufnehmen. Sie sind sich also sehr ähnlich.


Übungsaufgabe

Das Programm fragt nach dem Vor- und Nachnamen sowie dem Alter. Diese Werte speichert es in einem array und gibt dessen Inhalt auf der Seite wieder aus. Die Gleiche Aufgabe soll auf der zweiten Seite mit einer Map ausgeführt werden.

Hier geht es zur Lösung (array)
Hier geht es zur Lösung (map)

Nun soll der Anwender drei Datensätze erstellen, die je in ein leeres Array gespeichert werden. Dannach soll er eines der drei Datensätze wählen können und die gewünschte Position/Index. Der Wert erscheint schließlich auf der Seite.

Hier geht es zur Lösung