Objekteigenschaften
Literal und Punkt-Lesen liegen schon im Werkzeugkasten. Auf einem echten Formular ändert sich die Tasche selbst: nach der Farbwahl taucht ein Feld auf, beim Speichern verschwindet eine Entwurfsflagge, und eine Stadt sitzt im Adressobjekt. Diese Seite ist genau diese Alltagsarbeit an Eigenschaften.
Nach dem ersten Literal
Die Objekt-Seite hat die Tasche gebaut und ein Feld gelesen. Hier änderst du, welche Schlüssel existieren: einen fehlenden holen, einen überflüssigen fallen lassen, fragen ob ein Name da ist, in ein innen liegendes Objekt steigen und die Namen auflisten, die du wirklich hältst.
Fünf Züge an einer Eigenschaft
📊 Ergänzen, entfernen, prüfen, schachteln, listen
| Zug | Schreibweise | Ergebnis |
|---|---|---|
| ergänzen | item.color = "blue" |
neue Eigenschaft am selben Objekt |
| entfernen | delete item.draft |
dieser Schlüssel ist weg |
| vorhanden | "sku" in item |
true oder false |
| schachteln | user.address.city |
Feld in einem weiteren Objekt |
| listen | Object.keys(user) |
Array der eigenen Schlüssel |
Nennst du den Zug, folgt die Zeile. Ergänzen prägt kein zweites Objekt. Entfernen macht aus dem Wert keine leere Zeichenkette. Eine Namensliste ist nicht dieselbe Aufgabe wie das Lesen eines Werts.
let item = {
name: "Mug",
price: 8
};
item.color = "blue";
console.log(item.color);
Zuweisung lässt einen fehlenden Schlüssel wachsen
item startete nur mit name und price. Weil color fehlte, erzeugt item.color = "blue" ihn. Es bleibt ein Objekt, jetzt mit drei Eigenschaften. Die Konsole gibt blue aus.
let item = {
name: "Mug",
price: 8,
draft: true
};
delete item.draft;
console.log("draft" in item);
delete hebt den Schlüssel ab
delete item.draft nimmt diese Eigenschaft weg, nicht das ganze Objekt. Danach ist "draft" in item gleich false. Name und Preis bleiben. "" oder null speichern ist ein anderer Akt: der Schlüssel bleibt, mit neuem Wert.
let item = {
name: "Mug",
price: 8
};
console.log("name" in item);
console.log("sku" in item);
in antwortet mit ja oder nein zum Schlüssel
"name" in item ist true — der Name sitzt auf dem Objekt. "sku" in item ist false — du hast ihn nie ergänzt. Eine fehlende Eigenschaft liest sich als undefined, und ein gespeichertes undefined ebenso. in fragt nach dem Schlüssel, nicht nach dem Wert dort.
let user = {
name: "Lina",
address: {
city: "Shiraz",
zip: "71345"
}
};
console.log(user.address.city);
Eine Eigenschaft darf ein weiteres Objekt halten
address ist keine Zeichenkette. Es ist ein Objekt mit city und zip. user.address.city geht zwei Schritte: hinein in address, dann in city. Die Konsole gibt Shiraz aus. Schachteln hält die Adressteile beisammen, statt jedes Stück flach auf user zu legen.
let user = {
name: "Lina",
role: "editor"
};
let names = Object.keys(user);
console.log(names);
Object.keys reicht dir die Namen
Object.keys(user) liefert ein Array der eigenen Schlüssel — hier ["name", "role"]. Den Wert liest du weiter mit Punkt oder Klammern. Die Liste hilft, wenn nicht jeder Name fest im Quelltext stehen soll. Werte druckt sie nicht von selbst.
Erst den Zug wählen, dann tippen
Neues Feld? Zuweisen. Schlüssel soll verschwinden? delete. Ja oder nein? in. Stadt in einer Adresse? Schachteln, dann den Punkten folgen. Nur die Namen? Object.keys. Funktionen, die auf dem Objekt liegen — Methoden — gehören zur nächsten Lektion.
Verschachtelte Stadt nach einem Ergänzen auf die Seite
Starte mit Nutzer und Adresse, ergänze plan im Skript und setze die Stadt in einen Absatz.
<!DOCTYPE html>
<html>
<head>
<title>object-properties — page</title>
</head>
<body>
<p id="place">…</p>
<script>
let user = {
name: "Lina",
address: { city: "Shiraz" }
};
user.plan = "yearly";
let box = document.getElementById("place");
box.textContent = user.address.city + " — " + user.plan;
</script>
</body>
</html>
Der Absatz zeigt Shiraz — yearly. Die Stadt war schon geschachtelt; plan kam nach dem Literal. Ändere nur city oder plan, lade neu und lies die Zeile. Nächste Lektion: Objektmethoden — Funktionen, die auf dem Objekt leben.
Übungsschritte
- Baue ein Objekt mit zwei Eigenschaften, ergänze eine dritte per Zuweisung und gib sie aus.
- Setze
draft, entferne es mitdeleteund prüfe"draft" in item. - Bei einem Objekt, das nur
namehat, gib"name" in itemund"sku" in itemaus. - Schachtele
addressmitcityund gibuser.address.cityaus. - Gib
Object.keysfür ein Objekt mit zwei Schlüsseln aus und lies das Array. - In der HTML-Demo nur
cityoderplanändern, neu laden, den Absatz lesen.
Häufige Stolpersteine
- Glauben,
item.color = "blue"präge ein ganz neues Objekt — es wächst dasselbe item.draft = nullschreiben, obwohldelete item.draftgemeint war — der Schlüssel bleibt- Fehlenden Schlüssel und gespeichertes
undefinedals dieselbe Frage behandeln — für den Schlüsselinnehmen user.cityschreiben, obwohlcityaufuser.addressliegt- Erwarten, dass
Object.keysWerte liefert - Auf dieser Seite nach Methoden und
thissuchen — das ist die nächste Lektion
Kurz gefasst
- Zuweisung an einen fehlenden Schlüssel ergänzt diese Eigenschaft
deleteentfernt den Schlüssel; der Rest des Objekts bleibt"key" in objsagt, ob der Schlüssel existiert- Eine Eigenschaft kann ein weiteres Objekt halten; weitere Punkte gehen hinein
Object.keysliefert die Namen, nicht die Werte- Ein geschachteltes Feld und ein neu ergänztes können sich eine Zeile auf der Seite teilen
- Als Nächstes: Objektmethoden — Funktionen, die am Objekt gespeichert sind
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt