Javascript Arrays und Objekte

27.11.2016 09:30 Uhr

Javascript-Profis mögen mir verzeihen. Es ist mir durchaus bewusst, dass Javascript Arrays ebenfalls Objekte sind. Doch in dieser Kursstunde geht es um die unterschiedlichen Art und Weisen der Speicherung von Werten unter einem Namen und die Unterschiede. Dazu bewegen wir uns mehr auf dem Weg der Verständlichkeit als immer nur auf dem technisch genauen und manchmal unverständlichen.

Grundsätzlich haben Javascript Arrays und Javascript Objekte eines gemeinsam: Wir können mit ihnen mehrere Werte unter einem Namen speichern. Das ist besonders dann sinnvoll, wenn wir nicht genau wissen, wie viele Werte uns erwarten. Denken Sie an ein Kassensystem: Wie viele Waren legt der Käufer auf das Band?

Javascript Arrays bei „gleichen“ Werten

Immer wenn wir mehrere Werte vom logisch gleichen Typ speichern wollen, macht es Sinn, ein Javascript Array zu bemühen. Wollen wir unseren Bestand an Obst katalogisieren, so gelingt uns das mit nur einem Javascript-Namen.

var meinObst = ["Birne", "Apfel", "Pflaume"];

Auf diese Art und Weise werden mehrere Werte unter einem Namen gespeichert. Um auf diese Werte wieder zuzugreifen, können wir die Werte immer noch über den Namen erreichen. Wir müssen allerdings ihre „Nummer“ hinzugeben. Die Nummer wird automatisch vergeben, zählt automatisch hoch und startet immer bei „0“. Um auf den zweiten Wert zuzugreifen, geben wir also an:

alert( meinObst[1] );   // gibt "Apfel" aus

In unserem Beispiel wissen wir genau, wie viele Werte sich in unserem Array befinden. Das ist aber nicht immer zwingend gegeben. Wir können den Wert aber abfragen und auch nutzen.

alert( meinObst.length );   // gibt 3 aus

Wollen wir nun alle Obstsorten wieder ausgeben, so können wir uns einen String zusammenbauen. Zur Verdeutlichung wird hinter jeden Eintrag ein „<br>“ gehangen und so eine neue Zeile erzeugt. Dazu muss der fertige String natürlich angezeigt werden.

// das ist der Javascript-Teil
var meinObst = ["Birne", "Apfel", "Pflaume"];
var ausgabe = "";
for( var i = 0; i < meinObst.length; i++) {
    ausgabe += meinObst[ i ] + "<br>";
}
$('#ausgabe').html( ausgabe );

// das ist der HTML-Teil
<div id="ausgabe"></div>

Die For-Schleife definiert zu Beginn eine Variable i mit dem Wert 0. Bei jedem Durchlauf der Schleife wird der Wert von i um eins erhöht (i++). Das Ganze läuft solange, bis i nicht mehr kleiner als die Länge des Javascript Arrays ist. Da das Array eine Länge von 3 hat, der letzte Wert aber 2 ist (es wird bei 0 mit dem Zählen begonnen), stimmt diese Abfrage immer.

Alternativ können Sie die gleiche Ausgabe auch mithilfe einer while-Schleife realisieren. Das Ergebnis ist exakt das gleiche, nur verhindert man die Nutzung der bisweilen recht komplizierten for-Konstruktion. In diesem Fall sieht ein entsprechendes Code-Beispiel wie folgt aus:

// das ist der Javascript-Teil
var meinObst = ["Birne", "Apfel", "Pflaume"];
var ausgabe = "";
var i = 0;
while( i < meinObst.length ) {
    ausgabe += meinObst[ i ] + "<br>";
    i = i + 1;
}
$('#ausgabe').html( ausgabe );

// das ist der HTML-Teil
<div id="ausgabe"></div>

Javascript Objekte bei „unterschiedlichen“ Werten

Arrays werden immer gerne genutzt, wenn gleiche Werte genutzt werden. Es macht wenig Sinn, in der Aufzählung von Obst plötzlich Vornamen von Studenten zu speichern. Soll hingegen ein einzelner Student mit all seinen Werten unter einem Namen bespeichert werden, so hilft uns ein Array nicht weiter. Wir wissen später nicht mehr, an welcher Position nun der Vorname und an welcher Position seine Matrikelnummer genannt wird. Hier müssen statt Javascript Arrays besser Javascript Objekte zum Einsatz kommen.

Diese werden ähnlich definiert, die Werte bekommen aber alle noch einen Namen.

var student = {
"vorname":"Karl",
"nachname":"Mustermann",
"matrikelnummer":"1234567"
};

Die einzelnen Werte sind mit Komma getrennt und bestehen immer aus einem Namen und einem Wert, die mit einem Doppelpunkt getrennt sind. Auf diese „Eigenschaften“ des Objekts kann nun sehr einfach zugegriffen werden.

alert( student.vorname );

Auch in diesem Beispiel können wieder alle Werte ausgegeben werden, dies ist durch den jQuery-Befehl each vergleichsweise einfach, sofern man die Verwendung der anonymen Funktion bereits erlernt hat.

var ausgabe = "";
$.each( student, function( eigenschaft, wert ) {
    ausgabe += eigenschaft + " hat den Wert " + wert + "<br>";
});
$('#ausgabe').html( ausgabe );

Dieses Beispiel befüllt unseren DIV-Container aus dem vorstehenden Beispiel wieder mit allen Werten und ein wenig zusätzlichem Text und HTML-Code.

Fazit

Ob Sie für Ihr Projekt lieber Javascript Arrays oder Javascript Objekte verwenden, hängt ganz vom Verwendungszweck ab. In den meisten Fällen werden Sie eine Kombination aus mehreren Arrays und Objekten einsetzen müssen. Beherrschen müssen Sie beides, denn Sie werden definitiv mit beiden Elementen noch konfrontiert werden.