Wiederholung: Objekte

Dies ist eine Wiederholung von dem, was wir in diesem Tutorial über Objekte gelernt haben.

Es gibt viele Arten von Werten, die in JavaScript-Variablen gespeichert werden können. Manchmal wollen wir eine Reihe verwandter Werte zusammen speichern. In diesem Fall kommen Objekte ins Spiel!

Ein Objekt ist ein Datentyp, der uns eine Gruppe von Eigenschaften in einer einzigen Variablen speichern lässt. Um ein Objekt zu erstellen, deklarieren wir wie gewohnt eine Variable. Danach benutzen wir geschweifte Klammern um die Liste Schlüssel-Wert-Paare der Eigenschaften herum:

var objektName = { 
  eigenschaftsName: eigenschaftsWert,
  eigenschaftsName: eigenschaftsWert,
  ...
};

Hier ein Objekt, welches Winston beschreibt. Dieses Objekt hat zwei Eigenschaften, Heimatstadt und Haare. Der Wert beider Eigenschaften sind Zeichenfolgen:

var aboutWinston = {
  hometown: "Mountain View, CA",
  hair: "no"
};

Hier ein komplexeres Objekt. Eine Katze mit vier Eigenschaften. Alter, FellFarbe, Vorlieben und Geburtstag.

var lizzieTheCat = {
  alter: 18,
  fellFarbe: "grey",
  vorlieben: ["Katzengras", "Milch"],
  geburtstag: {"monat": 7, "tag": 17, "jahr": 1994}
};

Beachte, wie jede Eigenschaft einen unterschiedlichen Datentyp speichert. Alter speichert eine Zahl, FurColor speichert einen String, mag speichert ein Array und Geburtstag speichert ein anderes Objekt. Das ist eben das phantastische bei Objekten, nur eines der guten Dinge, sie können andere Objekte speichern! Du kannst also komplexe Daten mit tief verschachtelten Objekten beschreiben.

Möglicherweise siehst du auch Objekte mit Anführungszeichen um die Namen der Eigenschaft:

var aboutWinston = {
  "hometown": "Mountain View, CA",
  "hair": "no"
};

Dies entspricht dem, was wir vorher ohne Anführungszeichen gesehen haben, aber wir müssen dazu mehr tippen. Du musst nur dann Anführungszeichen verwenden, wenn der Eigenschaftenname ein Leerzeichen enthält:

var aboutWinston = {
  "his hair": "none"
};

Hier müssen wir Anführungszeichen benutzen, da ansonsten der JavaScript-Interpreter wegen des Leerzeichens einen Fehler meldet. Hier ein Tipp für dich: Verwende ganz einfach keine Leerzeichen in den Eigenschaftsnamen! Normalerweise musst du für Eigenschaftnamen niemals Anführungszeichen benutzen.

Auf Objekteigenschaften zugreifen

Ein Objekt ist nur dann nützlich, wenn wir in es hineinschauen und auf die Werte seiner Eigenschaften zugreifen können. Wir können dies auf zwei Arten tun. Erstens können wir die sogenannten "Punktnotation" verwenden, bei welcher wir den Namen der Variable gefolgt von einem "." und dem Namen der Eigenschaft schreiben:

var aboutWinston = {
  hometown: "Mountain View, CA",
  hair: "no"
};

text("Winston is from " + aboutWinston.hometown, 100, 100);
text("Winston has " + aboutWinston.hair + " hair", 100, 150);

Wir können aber auch die "Klammer-Notation" verwenden. Diese sieht ähnlich aus, wie wenn wir auf Elemente eines Array zugreifen. Bei dieser Methode schreiben wir den Variablennamen des Objektes gefolgt von eckigen Klammern, mit dem Namen der Eigenschaft in Anführungszeichen dazwischen:

var hisHometown = aboutWinston["hometown"];
var hisHair = aboutWinston["hair"];

Wenn wir auf eine Eigenschaft, welche es gar nicht gibt, zugreifen, erhalten wir die Fehlermeldung "undefined":

text("Winston's life goal is " + aboutWinston.lifeGoal, 100, 150);

Objekteigenschaften verändern

Genau wie wenn wir andere Datentypen in Variablen speichern, können wir die Werte der Eigenschaften des Objekts während der Ausführung eines Programms mit der Punkt- oder Klammer-Notation jederzeit ändern:

aboutWinston.hair = "curly"; // Winston bekommt eine Perücke!

Wir können auch ganz neue Eigenschaften definieren!

aboutWinston.lifeGoal = "teach JavaScript";

Wenn wir eine Eigenschaft nicht mehr brauchen, können wir sie löschen. Aber meistens werden wir wahrscheinlich nur seinen Wert ändern:

delete aboutWinston.hair;

Arrays von Objekten

Nun, da du beides Arrays und Objekte kennst, kannst du diese kombinieren und Arrays von Objekten erstellen. Diese sind sehr hilfreich, um Daten in deinen Programmen zu speichern. Zum Beispiel ein Array von Katzen:

var myCats = [
  {name: "Lizzie", 
   age: 18},
  {name: "Daemon",
   age: 1}
];

for (var i = 0; i < myCats.length; i++) {
  var myCat = myCats[i];
  println(myCat.name + ' ist ' + myCat.age + ' Jahre alt.');
}

Beachte, dass wir durch ein Array von Objekten genau gleich wie durch ein Array von Zahlen oder Strings mit einer for-Schleife iterieren. In jeder Iteration greifen wir mit der Klammer-Notation auf die Elemente eines Arrays zu und können dann die Eigenschaften dieses Elements (ein Objekt) mit der Punkt-Notation verwenden.

Hier ein anderes praktisches Beispiel, welches du in deinen Programmen verwenden kannst. Ein Array von Koordinaten-Positionen:

var positions = [
    {x: 200, y: 100},
    {x: 200, y: 200},
    {x: 200, y: 300}
];

for (var i = 0; i < positions.length; i++) {
    var position = positions[i];
    ellipse(position.x, position.y, 100, 100);
}

Cool nicht? Objekte können anfangs etwas verwirrend sein, bleib aber dabei und verwende sie, und plötzlich wirst du süchtig nach ihnen und möchtest alles in ein Objekt verwandeln!

Willst du an der Diskussion teilnehmen?

Anmelden

Sortiere nach:

Noch keine Beiträge.

Verstehst du Englisch? Klick hier, um weitere Diskussionen auf der englischen Khan Academy Seite zu sehen.