Ein Objekt enthält Schlüssel-Werte Paare.
Über die Schlüssel kann auf die Werte lesend und schreibend zugegriffen werden.
Ein Objekt kann in unterschiedlichen Formen erzeugt werden.
Objekt-Literal-Schreibweise
Konstruktorfunktion (wird später erklärt)
Object.create() (wird später erklärt)
Hier wird zunächst nur die Literal-Schreibweise betrachtet.
Inhalt eines Objektes sind Eigenschaften und Methoden.
line: code : Objekt-Literal-Schreibweise
01: 02: 03: 04: 05: 06: 07: 08: 09: 10:
var person = { anrede: 'Herr', name: 'Hinterwaldhuber', vorname: 'Waldemar', anrufen: function(){ show('Hallo'); } };
2
Zugriff auf Eigenschaften eines Objekts
Der Zugriff erfolgt entweder über die Punktschreibweise oder über die []-Notation.
Die Punktschreibweise funktioniert nur für Eigenschaften mit gültigem Variablennamen. Für das Arbeiten mit Eigenschaften,
die keinen gültigen Namen haben, beispielsweise solche mit einem Bindestrich,
müssen Sie die []-Notation verwenden. Dabei wird der Eigenschaftsname als String zwischen [] angegeben.
Ohne die []-Notation würde z.B. ein Bindestrich als Minuzeichen interpretiert werden.
Natürlich können Sie auch normale Eigenschaftsnamen in []-Notation angeben.
Hier z.B. person['vorname']
line: code : Objekt Zugriff in Punktschreibweise
1: 2: 3: 4: 5:
// Zugriff auf das Objekt (auf die Eigenschaften) show(person.anrede+' '+ person['vorname']+' '+ person.name); person.anrufen(); // Auf die Methode
>
Arrays
Auch Arrays sind in Javascript Objekte. Sie können in 2 Arten deklariert werden:
Über eine Kunstruktorfunktion
line: code : Array-Kunstruktorfunktion
1: 2: 3: 4: 5: 6:
var auto_ger = new Array(); auto_ger[0]="Mercedes"; auto_ger[1]="BMW"; auto_ger[2]="Audi"; auto_ger[3]="VW";
hier wurde jedes einzelne Tabellenelement mit Angabe seines Index deklariert
line: code : Array-Kunstruktorfunktion
1:
var auto_eu = new Array("Jaguar","Mini", "Rover","Volvo");
hier wurden alle Elemente der Tabelle direkt angegeben
Beide Formen erzeugen eine Tabelle mit jeweils 4 Elementen.
Über eine Literalschreibweise
line: code : Array-Kunstruktorfunktion
1:
var auto_ost =[ "Toyota", "Honda", "Nissan"," " ];
Diese Form ist ab ECMAScript 6 für alle Mainbrowser ausser IE11 verfügbar.
Mit der Angabe eines Index kann auf den Inhalt eines Tabellen Elementes zugegriffen werden.
Alle Tabellenformen haben die Eigenschaft length, die die aktuelle Länge der Tabelle enthält.
Diese kann auch verwendet werden, um auf das letzte Element zuzugreifen oder die Tabelle zu verlängern.
// Zugriff auf auf die Eigenschaft length function run_tablength(){ show('auto_ger[3] : ' +auto_ger[3]); show('Tabellenlänge auto_ger : '+auto_ger.length); show('Tabellenlänge auto_eu : '+auto_eu.length); show('Tabellenlänge auto_ost : '+auto_ost.length); show(auto_ger[auto_ger.length-1]); // Achtung -1 hier erforderlich auto_ger[auto_ger.length]='Ford'; // Hänge neues Element an show('Tabellenlänge auto_ger : '+auto_ger.length); // neue Länge show('Letztes Element : '+auto_ger[auto_ger.length-1]); }
Alle Tabellen haben folgende Methoden :
Methode
Beschreibung
toString()
Gibt die Tabelle als String aus.
push()
Fügt das übergebene Element an das Ende des Arrays an. Syntax :   arr.push(element1 [, ... [, elementN]])   Returnwert: neue Länge Da push() eine generische Methode ist kann sie auch auf Objekt angewendet werden.
pop()
Entfernt das letzte Element des Arrays. Syntax :   arr.pop()   Returnwert: das entfernte Element.
shift()
Entfernt das erste Element des Arrays. Gibt das entfernte Element zurück
forEach()
Wendet eine übergebene Funktion auf jedes Element des Arrays an
slice()
Schneidet Elemente aus dem Arrays heraus
Syntax : arr.slice([begin[, end]]) Rückgabe , der ausgeschnittene Teil Originaltabelle wird nicht verändert.
splice()
fügt neue Elemente in das Arrays ein
concat()
Hängt Elemente oder Arrays an das Arrays an.
sort()
Sortiert das Arrays. Dabei muss eine Vergleichsfunktion übergeben werden
reverse()
Kehrt die Reihenfolge der augenblicklichen Sortierung um.
filter()
Filtert Elemente aus dem Array. Dazu muss eine Funktion mit dem Filterkriterium übergeben werden
map()
Bildet die Elemente auf der Basis einer übergebenen Funktion auf neue Elemente ab
join()
Wandelt ein Arry in eine Zeichenkette um
reduce()
Faßt die Elemente aus dem Arrays auf der Basis einer übergebenen Funktion zusammen.
Weitere Methoden finden Sie in der Dokumentation Array bei mozilla.org
Mit die einfachste Methode ist push(). Damit wird ein neues Element an die Tabelle angehängt.
Sie kann an Stelle von arrayName[arayName.length]="Neues Eleḿent" verwendet werden.
Mit Hilfe der Methode pop() wird das letzet Element aus dem Array entfernt.
show('Tabelle als String : '+auto_eu.toString()); show('Tabellenlänge auto_eu : '+auto_eu.length); auto_eu.push('Renault'); auto_eu.push('Skoda'); show('Tabellenlänge auto_eu : '+auto_eu.length+' '+auto_eu.toString()); show('Letztes Element : '+auto_eu[auto_eu.length-1]); auto_eu.pop(); // kein Parameter show('Nach pop() Länge auto_eu : '+auto_eu.length+' '+auto_eu.toString()); show('Letztes Element : '+auto_eu[auto_eu.length-1]); show('Erstes Element : '+auto_eu[0]); var elem_1=auto_eu.shift(); // kein Parameter show('Rückgabe von shift : '+elem_1); // entfentes Element ausgeben show('erstes Element jetzt : '+auto_eu[0]); show('Tabellenlänge auto_eu : '+auto_eu.length+' '+auto_eu.toString()); show('Ausgabe der gesamten Tabelle'); auto_eu.forEach(function(curr_element, index){ show(' '+index+' '+curr_element); } ); show(auto_eu.toString());
Zeile 1: Gibt die Tabelle als String aus. Die Elemente sind durch Komma getrennt.
Zeile 2: Gibt die aktuelle Tabellenlänge vo auto_eu aus
Zeile 3: Fügt ein neues Element hinzu
Zeile 4: Fügt ein weiteres Element hinzu
zeile 5: Zeigt die jetzt aktuelle Tabellenlänge. Sie muss um 2 grösser sein als in Zeile 2
Zeile 6: Zeigt das letzte Tabelenelement mit Hilfe der Eigenschaft length . Beachten Sie die -1
Zeile 7: Entfernt das letzte Element. Damit veringert sich auch die Tabellenlänge
Zeile 8: hier wird die veringerte Tabellenlänge angezeigt.
Zeile 9: Zeigt das jetzt letzte Element
Zeile 10: Zeigt das erste Tabellenelement, bevor das Element entfernt wird.
Zeile 11: Entfernt das erste Element, liefert aber den Inhalt zurück. Dieser wird ein der Variablen gespeichert.
Zeile 12: Die Rückgabe wird angezeigt
Zeile 13: Auch die Tabellenlänge wurde durch shift() verringert. Das wird hier angezeigt.
Zeile 14: Ausgabe einer Überschrift.
Zeile 15: Die Tabelle wird mit der forEach-Methode abgearbeitet. Es wird eine anonyme Funktion verwendet.
Dieser wird automatisch das jeweilige Element als Parameter übergeben.
Innerhalb der anonymen Funktion kann mit dem Parameter weitergearbeitet werden.
Hier wird er benutzt, um die Tabelle Zeilenweise auszugeben
Tabelle Concatination
line: code : Array Methoden concat(), slice und splice()
Zeigt den augenblicklichen Stand der Tabelle auto_ger
Zeigt den augenblicklichen Stand der Tabelle auto_eu
erzeugt eine neue Tabelle auto_all, in der auto_ger und auto_eu zusammengefasst werden.
auto_ger und auto_eu werden dabei nicht verändert.
Gibt die neue Tabelle aus.
Kopiert aus der Tabelle auto_all die Elemente 3 bis 5 (ausschliesslich), d.h nur [3] und [4]
Die globale Tabelle tmp wird dabei überschrieben (war aber leer).
Hier wird bei slice nur der Startwert angegeben. tmp enthält damit alle Elemente ab auto_all[5]
Zeigt das Ergebnis. SLICE schneidet/kopiert also Scheiben (Elemente) aus der Tablle, wobei die Ursprungstabelle nicht
verändert wird.
forEach
Eine forEach iteriert über die Tabelle und erwartet ein Callback dem bis zu 3 Parameter übergeben werden.