Objekte

Objekte haben eine starke Ähnlichkeit mit Arrays. Es wird jedoch anstatt eines Index ein String benutzt. Diesen nennt man auch Key, Schlüssel oder Eigenschaft. Die Elemente auf die sie verweisen nennt man Werte.

Im Prinzip ist ein Objekt das gleiche wie ein Array, bei dem anstatt eines Index ein String benutzt wird.

Schlüssel		Wert
"beine"	:	2
"laenge"	:	6
"nahrung"	:	"Fleischfresser"

 

Wir haben es hier mit Schlüssel-Werte- Paaren zu tun. Während Arrays in der Regel eine Reihe gleichartiger Werte enthält, so haben Objekte in der Regel einzelne Elemente mit Eigenschaften oder Attributen. Ein Beispiel verdeutlicht den Unterschied. Ein Array dinos enthält die Namen verschiedener Dinosaurier. Ein Objekt könnte die verschiedenen Eigenschaften und Attribute eines einzelnen Dinosauriers enthalten, wie Größe, Gewicht, Anzahl der Beine etc.

 

var trex = {
"beine" : 2,
"laenge" : 6,
"nahrung" : "Fleischfresser"
}

Hier wird eine Variable namens trex erstellt. Diese bekommt ein Objekt mit 3 Schlüssel- Werte- Paaren. Im Gegensatz zu Arrays, werden Objekte in geschweiften Klammern anstatt in eckigen Klammern gesetzt. Alles was zwischen den geschweiften Klammern steht wird Objektliteral genannt. Literal bedeutet, der gesamte Wert wird in einem Schritt aufgeschrieben und nicht nacheinander aufgebaut.

Der Schlüssel ist immer ein String. Er muss allerdings nicht in Anführungsstrichen geschrieben sein. Wenn man ihn jedoch ohne Anführungszeichen schreibt, muss man diesselben Regeln wie bei Variablennamen beachten. Schreibt man den Schlüssel in Anführungsstrichen sind beispielsweise auch Leerzeichen erlaubt.

var trex = {
beine : 2,
laenge : 6,
nahrung : "Fleischfresser"
}

Auf Objekte zugreifen:

Man kann genau wie bei Arrays über eckige Klammern auf die Objektwerte zugreifen, die Eigenschaft sollte in Anführungszeichen stehen.

trex["beine"]

Eine andere Möglichkeit ist der Zugriff über Punktsyntax:

trex.beine

Die Punktsyntax kann man nur nutzen, wenn der Schlüssel keine verbotenen Sonderzeichen und/ oder Leerzeichen enthält.

Greift man auf einen Schlüssel zu, den es nicht gibt, wird der Wert undefined geliefert

Object.keys() / Zugriff auf alle Schlüssel

Beispiel

  let dino = {art: "T-Rex", beine : 2, food: 'meat'}
  Object.keys(dino);  //4['art', 'beine', 'food'] 

Die Schlüssel in Objekten haben keine festgelegte Reihenfolge, wie das bei einem Array der Fall ist. In unserem Beispiel ist "beine" nicht unbedingt das erste Element.

Siehe dazu auch das Thema for-in-Schleife. Damit kann man sich alle Elemente eines Objekts ausgeben lassen.

In folgendem Beispiel werden die Eigenschaften und deren Werte angezeigt. Vorrausseztung ist ein HTML Element mit der id="output":

let dino = {art:"T-Rex", beine: 5, food:"meat"}
let ausgabe = document.getElementById("output");
let eigenschaften = Object.keys(dino);
   
for(let i= 0; i < eigenschaften.length; i++){
    let prop = eigenschaften[i];
    ausgabe.innerHTML += prop +": "+ dino[prop] +"<br>";
}

for-in Schleife / Zugriff auf alle Elemente

Beispiel
Siehe dazu auch das Thema for-in-Schleife. Mit einer for-in-Schleife ist der Zugriff auf alle Elemente eines Objekts einfacher als mit Object.keys().

let dino = {art:"T-Rex", beine: 5, food:"meat"}
let ausgabe = document.getElementById("output");
  for(let prop in  dino){
    ausgabe.innerHTML += prop +": "+ dino[prop] +"<br>";
}

Werte zu Objekten hinzufügen

Man kann auch Schlüssel-Werte Paare im Nachhinein hinzufügen. Hier wird zuerst ein leeres Objekt mit geschweiften Klammern erstellt, dann werden die Schlüssel-Werte Paare hinzugefügt.

Eine Möglichkeit

var trex = {};  
  trex["beine"] = 2;
  trex["laenge"]= 6;
  trex["nahrung"] = "Fleischfresser";
  

Punktsyntax

var trex = {};  
  trex.beine = 2;
  trex.laenge= 6;
  trex.nahrung = "Fleischfresser";
  

Arrays und Objekte kombinieren

Man kann einem Array als Wert ein weiteres Array hinzufügen. Oder die Werte eines Arrays bestehen aus lauter Objekten. Damit erzeugt man datenbankähnliche Strukturen.

var dinosaurier = [
{ name: "Tyrannosaurus Rex", beine: 2, laenge : 6, nahrung: "andere Saurierer"},
{ name: "Stegosaurus", beine: 4, laenge: 8, nahrung: "Obst und Gemüse"},
{ name: "Brontosaurus", beine: 4, lange: 15, nahrung: "Blätter"}
];

Wir haben hier ein Array dinosaurier. Die Werte werden in eckigen Klammern eingefügt und mit Komma getrennt. Die Werte sind Objekte, welche in geschweiften Klammern eingefügt werden.

Man kann auch nachträglich Objekte hinzufügen:

var dinosaurier = [];
dinosaurier[0] = {};	
dinosaurier[0]["beine"] =  2;
dinosaurier[0]["name"] = "T-Rex";

Zugriff

Der Zugriff auf einen einzelnen Dino geschieht über den index. Alle Eigenschaften des ersten Dinos werden folgendermaßen geliefert:

dinosaurier[0]

dinosaurier[0]["name"] liefert "Tyrannosaurus Rex"

andere Möglichkeit Punktsyntax

dinosaurier[0].name

---

Javascript Tipps