JavaScript - Objektereigenschaften

Hallo, zukünftige JavaScript-Zauberer! Heute tauchen wir in die magische Welt der JavaScript-Objektereigenschaften ein. Als dein freundlicher Nachbarschaftsinformatiklehrer bin ich hier, um dich auf dieser aufregenden Reise zu führen. Also, hol dir deine virtuellen Zauberstäbe (Tastaturen) und lasst uns einige Codezauber werfen!

JavaScript Objektereigenschaften

Objekte in JavaScript sind wie Schatzkisten - sie enthalten wertvolle Informationen in Form von Eigenschaften. Jede Eigenschaft ist ein Schlüssel-Wert-Paar, wobei der Schlüssel wie eine Bezeichnung ist und der Wert der Schatz selbst ist. Lassen wir uns unser erstes Objekt erstellen:

let zauberer = {
name: "Harry",
alter: 17,
haus: "Gryffindor"
};

Hier haben wir ein zauberer-Objekt mit drei Eigenschaften erstellt: name, alter und haus. Jede Eigenschaft hat einen Schlüssel (wie "name") und einen Wert (wie "Harry").

Zugriff auf Objektereigenschaften

Nun, da wir unser zauberer-Objekt haben, wie greifen wir auf seine Eigenschaften zu? Es gibt zwei Möglichkeiten, dies zu tun:

1. Punktnotation
2. Klammernotation

Lassen wir es ausprobieren:

// Punktnotation
console.log(zauberer.name);  // Ausgabe: Harry

// Klammernotation
console.log(zauberer["haus"]);  // Ausgabe: Gryffindor

Die Punktnotation ist einfacher und wird häufiger verwendet. Die Klammernotation ist jedoch nützlich, wenn deine Eigenschaftsnamen Leerzeichen oder Sonderzeichen enthalten oder wenn du eine Variable verwendest, um auf die Eigenschaft zuzugreifen.

let eigenschaft = "alter";
console.log(zauberer[eigenschaft]);  // Ausgabe: 17

Zugriff auf verschachtelte Objektereigenschaften

Manchmal können Objekte andere Objekte enthalten. Es ist wie eine magische Schachtel von Puppen! Lassen wir unser zauberer-Objekt erweitern:

let zauberer = {
name: "Harry",
alter: 17,
haus: "Gryffindor",
zauberstab: {
holz: "Holly",
kern: "Phönixfeder",
länge: 11
}
};

Um auf verschachtelte Eigenschaften zuzugreifen, ketten wir einfach unsere Punktnotation oder Klammernotation:

console.log(zauberer.zauberstab.holz);  // Ausgabe: Holly
console.log(zauberer["zauberstab"]["kern"]);  // Ausgabe: Phönixfeder

Hinzufügen oder Aktualisieren von Objektereigenschaften

Objekte in JavaScript sind veränderbar, das bedeutet, wir können sie nach der Erstellung ändern. Lassen wir unseren Zauberer einige neue Fähigkeiten erlernen:

// Hinzufügen einer neuen Eigenschaft
zauberer.fähigkeit = "Quidditch";

// Aktualisieren einer vorhandenen Eigenschaft
zauberer.alter = 18;

console.log(zauberer.fähigkeit);  // Ausgabe: Quidditch
console.log(zauberer.alter);  // Ausgabe: 18

Löschen von Objektereigenschaften

Manchmal müssen wir Eigenschaften verschwinden lassen. Dafür verwenden wir den delete-Operator:

delete zauberer.haus;
console.log(zauberer.haus);  // Ausgabe: undefined

Puff! Die "haus"-Eigenschaft ist verschwunden. Denke daran, dass delete nur die Eigenschaft aus dem Objekt entfernt, es beeinflusst nicht die Variablen, die möglicherweise den Wert dieser Eigenschaft gehalten haben.

Aufzählen der Objektereigenschaften

Was ist, wenn wir alle Eigenschaften eines Objekts sehen möchten? Wir können eine for...in-Schleife verwenden:

for (let schlüssel in zauberer) {
console.log(schlüssel + ": " + zauberer[schlüssel]);
}

Dies wird alle aufzählbaren Eigenschaften des zauberer-Objekts auflisten. Aber wartet, es gibt mehr! Wir können auch Object.keys(), Object.values() oder Object.entries() verwenden, um Arrays der Schlüssel, Werte oder beider des Objekts zu erhalten:

console.log(Object.keys(zauberer));    // Ausgabe: ["name", "alter", "zauberstab", "fähigkeit"]
console.log(Object.values(zauberer));  // Ausgabe: ["Harry", 18, {holz: "Holly", kern: "Phönixfeder", länge: 11}, "Quidditch"]
console.log(Object.entries(zauberer)); // Ausgabe: [["name", "Harry"], ["alter", 18], ["zauberstab", {...}], ["fähigkeit", "Quidditch"]]

Eigenschaftsattribute

Jede Eigenschaft in JavaScript hat bestimmte Attribute, die ihr Verhalten definieren. Diese Attribute sind wie die Persönlichkeitsmerkmale der Eigenschaft. Lassen wir sie uns ansehen:

1. value: Der Wert der Eigenschaft (offensichtlich!)
2. writable: Können wir den Wert der Eigenschaft ändern?
3. enumerable: Soll diese Eigenschaft angezeigt werden, wenn wir die Eigenschaften des Objekts auflisten?
4. configurable: Können wir diese Eigenschaft löschen oder ihre Attribute ändern?

Standardmäßig sind alle diese auf true gesetzt für Eigenschaften, die wir normalerweise erstellen. Aber wir können sie mit Object.defineProperty() ändern:

Object.defineProperty(zauberer, "name", {
writable: false,
enumerable: false
});

zauberer.name = "Ron";  // Das wird nicht funktionieren
console.log(zauberer.name);  // Ausgabe: Harry

for (let schlüssel in zauberer) {
console.log(schlüssel);  // "name" wird hier nicht angezeigt
}

Hier ist eine Tabelle, die die Eigenschaftsmethoden zusammenfasst, die wir gelernt haben:

Methode	Beschreibung
object.eigenschaft	Einen Eigenschaft mit der Punktnotation zugreifen
object["eigenschaft"]	Einen Eigenschaft mit der Klammernotation zugreifen
object.eigenschaft = wert	Eine Eigenschaft hinzufügen oder aktualisieren
delete object.eigenschaft	Eine Eigenschaft löschen
for...in	Objekteigenschaften auflisten
Object.keys(object)	Ein Array der Schlüssel des Objekts erhalten
Object.values(object)	Ein Array der Werte des Objekts erhalten
Object.entries(object)	Ein Array der [Schlüssel, Wert]-Paare des Objekts erhalten
Object.defineProperty()	Eine neue Eigenschaft definieren oder eine vorhandene修改

Und das war's, junge Programmierer! Ihr habt gerade euren Crashkurs in JavaScript-Objektereigenschaften abgeschlossen. Denkt daran, Übung macht den Meister,also experimentiert weiter mit diesen Konzepten. Bereit, komplexe Objekte wie ein echter JavaScript-Zauberer zu zaubern!

Credits: Image by storyset