JavaScript-Objekte
Einführung in JavaScript-Objekte
In JavaScript sind Objekte grundlegende Elemente, die dabei helfen, Daten zu organisieren und zu speichern. Stellen Sie sich ein JavaScript-Objekt als eine besondere Box vor, in der Sie verschiedene Dinge aufbewahren können. Jedes Element in dieser Box wird in einem kleinen Fach mit einem Namen gespeichert (wir nennen das den Eigenschaftsnamen), und das Element selbst ist der Wert. Wenn wir zum Beispiel eine Box haben, die ein Buch darstellt, könnte sie Fächer mit den Bezeichnungen „Titel“, „Autor“ und „Anzahl der Seiten“ haben, wobei jedes Fach die entsprechenden Informationen über das Buch enthält.
Objekte erstellen
Mit Objektliteralen
Dies ist eine unkomplizierte Methode, bei der Sie das Objekt und seine Eigenschaften direkt mit geschweiften Klammern {} definieren:
In diesem Beispiel ist user ein Objekt mit zwei Eigenschaften: name und age. Sie sehen sofort, was das Objekt enthält, wodurch diese Methode sehr transparent und leicht zu verwenden ist.
Mit der Syntax new Object()
Alternativ können Sie mit einem leeren Objekt beginnen und dann die Eigenschaften nacheinander hinzufügen:
Bei dieser Methode wird zunächst ein leeres Objekt (user) erstellt und anschließend werden Eigenschaften (name und age) hinzugefügt. Das ist nützlich, wenn die Eigenschaften des Objekts von bedingter Logik abhängen oder zur Laufzeit bestimmt werden.
Warum sind Objekte wichtig?
Jetzt, da wir JavaScript-Objekte vorgestellt haben, fragen Sie sich vielleicht nach ihrer praktischen Bedeutung. Schauen wir uns an, warum das Beherrschen von JavaScript-Objekten für alle, die mit der Webentwicklung beginnen, unerlässlich ist.
- Organisation: Objekte helfen Ihnen, zusammengehörige Daten beisammenzuhalten, wodurch Ihr Code sauberer und leichter verständlich wird. Anstatt viele separate Variablen zu haben, können Sie zusammengehörige Daten in einem einzigen Objekt gruppieren.
Dieses Buchobjekt hält alle zusammengehörigen Informationen über das Buch übersichtlich in einer einzigen Variable organisiert.
- Wiederverwendbarkeit: Sobald Sie ein Objekt erstellt haben, können Sie es in Ihrem gesamten Code wiederverwenden. Das vereinfacht die Verwaltung gemeinsamer Daten und Funktionen.
Das Benutzerobjekt kann an verschiedene Funktionen wie displayUserInfo übergeben werden, ohne dass die Informationen des Benutzers neu definiert werden müssen.
- Flexibilität: Objekte in JavaScript sind sehr flexibel. Sie können neue Eigenschaften hinzufügen, Werte vorhandener Eigenschaften ändern oder Eigenschaften bei Bedarf löschen.
- Funktionalität: Objekte können auch Funktionen enthalten. Diese Funktionen (als Methoden bekannt) können Aktionen mithilfe der im Objekt enthaltenen Daten ausführen.
Das Objekt person hat eine greeting-Methode, die ihre eigenen Daten verwendet, um eine Begrüßung auszugeben. Vielleicht fragen Sie sich in diesem Beispiel nach dem Schlüsselwort this; weitere Informationen dazu finden Sie in unserem Artikel zum JavaScript-Schlüsselwort this.
- Prototypen: Jedes JavaScript-Objekt hat ein Prototype. Ein Prototype ist ein Vorlagenobjekt, von dem das Objekt Methoden und Eigenschaften erbt. Das ermöglicht leistungsstarke Vererbungsmodelle.
Hier erbt dog von animal, sodass es Zugriff auf die in animal definierte Eigenschaft isAlive sowie auf seine eigene Methode bark hat.
Auf Eigenschaften zugreifen und sie ändern
Objekte ermöglichen es Ihnen, mithilfe von Punktnotation oder Klammernotation auf ihre Eigenschaften zuzugreifen und sie zu ändern.
Auf Eigenschaften zugreifen
user.name greift mit Punktnotation auf die Eigenschaft name zu, was einfach und gut lesbar ist. user["age"] verwendet Klammernotation, die nützlich ist, wenn der Eigenschaftsname in einer Variablen gespeichert ist oder kein gültiger Bezeichner ist.
Sie können auch alle Schlüssel oder Werte eines Objekts mit Object.keys() und Object.values() abrufen:
Diese Methoden sind nützlich, um über Objekteigenschaften zu iterieren oder sie in Arrays umzuwandeln.
Eigenschaften ändern
Sie können auch die Eigenschaften eines Objekts ändern oder neue hinzufügen:
Das Beispiel zeigt das Hinzufügen einer neuen booleschen Eigenschaft (isAdmin), das Ändern des Werts einer vorhandenen Eigenschaft (name) und das Löschen einer Eigenschaft (age). Dies zeigt die veränderliche Natur von JavaScript-Objekten.
Let vs Const bei Objekten
Let
Mit let kann das Objekt einer neuen Objektinstanz neu zugewiesen werden. Diese Flexibilität ist nützlich, wenn das gesamte Objekt ersetzt werden muss.
Const
Mit const können Sie die Eigenschaften des Objekts ändern, aber der Variablen kein neues Objekt zuweisen. Dadurch bleibt die Referenz auf das Objekt konstant.
Objekt-Destructuring und Rest-Operator
Destructuring
Destructuring ermöglicht es Ihnen, Eigenschaften aus einem Objekt in separate Variablen zu entpacken:
Diese Syntax extrahiert die Eigenschaften firstName, lastName und age aus dem Objekt person in einzelne Variablen und vereinfacht so den Zugriff auf diese Eigenschaften.
Rest-Operator
Der Rest-Operator (...) wird verwendet, um die verbleibenden Eigenschaften zu sammeln, die noch nicht entpackt wurden:
Nach dem Extrahieren von age sammelt der Rest-Operator die übrigen Eigenschaften in einem neuen Objekt nameDetails, das nur firstName und lastName enthält.
Erweiterte Eigenschaftsattribute und Methoden
Getter und Setter
Getter und Setter sind Funktionen, die steuern, wie Sie auf Eigenschaften eines Objekts zugreifen und sie setzen:
Die Eigenschaft fullName wird durch einen Getter und einen Setter gesteuert. Der Getter gibt den vollständigen Namen zurück, indem er firstName und lastName kombiniert. Der Setter nimmt einen vollständigen Namen, teilt ihn in zwei Teile auf und weist sie entsprechend firstName und lastName zu.
Fazit
JavaScript-Objekte bieten eine strukturierte, effiziente und leistungsstarke Möglichkeit, Daten zu verwalten und zu manipulieren, was für die Erstellung interaktiver und dynamischer Webanwendungen unerlässlich ist. Zu verstehen, wie man Objekte effektiv nutzt, ist entscheidend für alle, die ihre JavaScript-Kenntnisse erweitern möchten.
Practice
What are the ways to create an object in JavaScript?