TOC

Grundlegendes zu Objekten in JavaScript

Einführung

Einobject in JavaScript ist eindata type, das aus einer Sammlung vonnames oderkeys undvalues besteht, dargestellt inname:value pairs. Die Name: Wert-Paare können ausproperties bestehen, die einen beliebigen Datentyp enthalten können - einschließlich Zeichenfolgen, Zahlen und Booleschen Werten - sowiemethods, Funktionen, die in einem Objekt enthalten sind.

Objekte in JavaScript sind eigenständige Entitäten, die mit Objekten im realen Leben verglichen werden können. Ein Buch könnte beispielsweise ein Objekt sein, das Sie durch Titel, Autor, Seitenzahl und Genre beschreiben würden. Ebenso könnte ein Auto ein Objekt sein, das Sie durch Farbe, Marke, Modell und Leistung beschreiben würden. JavaScriptarrays sind ebenfalls ein Objekttyp.

Objekte sind ein wesentlicher und grundlegender Aspekt der meisten JavaScript-Programme. Beispielsweise kann ein Benutzerkontoobjekt Daten wie Benutzernamen, Kennwörter und E-Mail-Adressen enthalten. Ein weiterer häufiger Anwendungsfall ist der Warenkorb einer Web-Shopping-Plattform, der aus einer Reihe von Objekten bestehen kann, die alle relevanten Informationen für jeden Artikel enthalten, z. B. Name, Preis und Gewicht für Versandinformationen. Eine Aufgabenliste ist eine weitere häufig verwendete Anwendung, die aus Objekten bestehen kann.

In diesem Lernprogramm erfahren Sie, wie Sie ein Objekt erstellen, welche Objekteigenschaften und Methoden verwendet werden und wie Sie auf Objekteigenschaften zugreifen, diese hinzufügen, löschen, ändern und durchlaufen.

Ein Objekt erstellen

Ein Objekt ist einJavaScript data type, genauso wie eine Zahl oder eine Zeichenfolge auch ein Datentyp ist. Als Datentyp kann ein Objekt in einer Variablen enthalten sein.

Es gibt zwei Möglichkeiten, ein Objekt in JavaScript zu erstellen:

  • Dieobject literal, die geschweifte Klammern verwenden:{}

  • Dasobject constructor, das das Schlüsselwortnew verwendet

Zu Demonstrationszwecken können wir mit beiden Methoden ein Beispiel für ein leeres Objekt erstellen.

Erstens das Objektliteral. 

// Initialize object literal with curly brackets
const objectLiteral = {};

Das Objektliteral initialisiert das Objekt mit geschweiften Klammern.

In diesem nächsten Beispiel verwenden wir den Objektkonstruktor. 

// Initialize object constructor with new Object
const objectConstructor = new Object();

Dieselben Daten wurden mit der Objektkonstruktormethode erstellt, die mitnew Object() initialisiert wurde.

Beide Ansätze erzeugen ein leeres Objekt. Die Verwendung von Objektliteralen ist die gebräuchlichste und bevorzugteste Methode, da weniger Inkonsistenzen und unerwartete Ergebnisse auftreten können.

Wir können ein Beispielobjekt erstellen, das in der Variablengimli enthalten ist, um ein Zeichen zu beschreiben. 

// Initialize gimli object
const gimli = {
    name: "Gimli",
    race: "dwarf",
    weapon: "axe",
    greet: function() {
        return `Hi, my name is ${this.name}!`;
    },
};

Unser neues Objekt istgimli, das drei Eigenschaften hat. Jede Eigenschaft besteht aus einemname:value-Paar, auch alskey:value-Paar bekannt. weapon ist einer der Eigenschaftsnamen, der mit dem Eigenschaftswert"axe", einer Zeichenfolge, verknüpft ist. Es gibt eine Methode mit einem Methodennamen vongreet und dem Methodenwert, der aus dem Inhalt der Funktion besteht.

Innerhalb vongreet wird möglicherweise das Schlüsselwortthis angezeigt. Wennthis innerhalb eines Objekts verwendet wird, bezieht es sich auf das aktuelle Objekt, in diesem Fallgimli.

Wenn Siegimli an die Konsole senden, wird das gesamte Objekt ausgedruckt. 

gimli;
Output{name: "Gimli", race: "dwarf", weapon: "axe", greet: ƒ}

Diese Ausgabe wird je nach verwendeter Konsole möglicherweise unterschiedlich gerendert. Sie sollten jedoch beachten, dass alle an das Objekt übergebenen Werte in der Ausgabe angezeigt werden.

Als Nächstes werden die Eigenschaften und Methoden eines JavaScript-Objekts überprüft.

Eigenschaften und Methoden

Objekte könnenproperties undmethods haben.

Eine Eigenschaft ist die Zuordnung zwischen einem Namen (Schlüssel) und einem Wert innerhalb eines Objekts und kann einen beliebigen Datentyp enthalten. Eine Eigenschaft bezieht sich im Allgemeinen auf die Eigenschaft eines Objekts.

Eine Methode ist eine Funktion, die den Wert einer Objekteigenschaft darstellt und daher eine Aufgabe, die ein Objekt ausführen kann.

Eine einfache Möglichkeit, sich den Unterschied zwischen Objekteigenschaften und Methoden zu merken, besteht darin, sich eine Eigenschaft als Substantiv und eine Methode als Verb vorzustellen. name,race undweapon sind alle einem Objekt zugeordneten Substantive und Eigenschaften. fight() odertalk() sind Verben, die als Methodenfunktionsdefinition verwendet werden können.

Auf Objekteigenschaften zugreifen

Es gibt zwei Möglichkeiten, auf die Eigenschaften eines Objekts zuzugreifen.

  • Punktnotation:.

  • Klammernotation:[]

Lassen Sie uns unser ursprüngliches Beispielobjektgimli erneut betrachten. 

const gimli = {
    name: "Gimli",
    race: "dwarf",
    weapon: "axe",
    greet: function() {
        return `Hi, my name is ${this.name}!`;
    },
};

Wenn wir den Eigenschaftswert vonweapon abrufen möchten, können wir dies mit der Objektpunktnotation tun, indem wir den Variablennamen des Objekts gefolgt von einem Punkt (.) und dem Eigenschafts- oder Methodennamen eingeben. 

// Retrieve the value of the weapon property
gimli.weapon;
Output"axe"

gimli.weapon gibt den Eigenschaftswert aus, der"axe" ist. Wir können dieselben Daten auch mit der Objektklammernotation abrufen. Ähnlich wie beiindex and access a string besteht die Syntax für die Klammernotation aus zwei eckigen Klammern ([]), die den Eigenschaftsnamen einschließen. 

// Retrieve the value of the weapon property
gimli["weapon"];
Output"axe"

Sowohl die Punktnotation als auch die Klammernotation werden regelmäßig verwendet. Die Punktnotation ist schneller und besser lesbar, weist jedoch weitere Einschränkungen auf. Die Klammernotation ermöglicht den Zugriff auf in einer Variablen gespeicherte Eigenschaftsnamen und muss verwendet werden, wenn die Eigenschaft eines Objekts Sonderzeichen enthält.

Um eine Objektmethode abzurufen, würden Sie sie ähnlich wie eine reguläre Funktion aufrufen, die nur an die Objektvariable angehängt ist. 

gimli.greet();
Output"Hi, my name is Gimli!"

Im obigen Beispiel sehen wir, dass der Zeichenfolgenwert für die Objektmethodegreet() zurückgegeben wird.

Nun können wir die Objekteigenschaften ändern, indem wir Name: Wert-Paare hinzufügen oder vorhandene ändern.

Objekteigenschaften hinzufügen und ändern

Um einem Objekt eine neue Eigenschaft hinzuzufügen, weisen Sie einer Eigenschaft mit dem Zuweisungsoperator (=) einen neuen Wert zu.

Beispielsweise können wir dem Objektgimlials neue Eigenschaftageeinen numerischen Datentyp hinzufügen. Sowohl die Punkt- als auch die Klammernotation können verwendet werden, um eine neue Objekteigenschaft hinzuzufügen. 

// Add new age property to gimli
gimli.age = 139;
// Add new age property to gimli
gimli["age"] = 139;

Wir können genauso wie oben auf diesen Wert zugreifen, entweder mit der Punktnotation oder der Klammernotation. 

gimli.age;
Output139

Auf die gleiche Weise kann dem Objekt auch eine Methode hinzugefügt werden. 

// Add new fight method to gimli
gimli.fight = function() {
    return `Gimli attacks with an ${this.weapon}.`;
}

Sobald wir diese neue Objektmethode erstellt haben, können wir sie wie oben beschrieben aufrufen. 

gimli.fight();
Output"Gimli attacks with an axe."

Auf dieselbe Weise kann die Eigenschaft eines Objekts geändert werden, indem einer vorhandenen Eigenschaft ein neuer Wert zugewiesen wird. 

// Update weapon from axe to battle axe
gimli.weapon = "battle axe";

Wenn wir das Objekt an dieser Stelle aufrufen, sehen wir alle unsere Ergänzungen und Änderungen. 

gimli;
Output{name: "Gimli", race: "dwarf", weapon: "battle axe", age: 139, greet: ƒ, fight: ƒ}

Durch die Zuweisungsoperation können wir die Eigenschaften und Methoden eines JavaScript-Objekts ändern.

Objekteigenschaften entfernen

Um eine Eigenschaft aus einem Objekt zu entfernen, verwenden Sie das Schlüsselwortdelete. delete ist ein Operator, der eine Eigenschaft aus einem Objekt entfernt.

Im folgenden Beispiel entfernen wir die Eigenschaftweapon ausgimli mitdelete. 

// Remove weapon from gimli
delete gimli.weapon;
Outputtrue

Die Operationdelete wird alstrue ausgewertet, wenn die Eigenschaft erfolgreich entfernt wurde oder wenn sie für eine nicht vorhandene Eigenschaft verwendet wurde.

Wir können die Ausgabe vongimli testen, um festzustellen, ob dies erfolgreich war. 

gimli;
Output{name: "Gimli", race: "dwarf", age: 139, greet: ƒ, fight: ƒ}

In der obigen Ausgabe sind der Name vonweaponund der zugehörige Wert nicht mehr verfügbar, was zeigt, dass wir die Eigenschaft erfolgreich gelöscht haben.

Im nächsten Abschnitt werden Möglichkeiten zum Durchlaufen von Objekten in JavaScript beschrieben.

Durchlaufen von Objekteigenschaften

JavaScript verfügt über eine integriertefor-Schleife, die speziell zum Durchlaufen der Eigenschaften eines Objekts vorgesehen ist. Dies ist alsfor...in-Schleife bekannt.

Hier ist eine vereinfachte Version unseres Hauptobjektbeispielsgimli. 

const gimli = {
    name: "Gimli",
    race: "dwarf",
    weapon: "battle axe",
};

Wir könnenfor...in verwenden, um alle Eigenschaften vongimli zu durchlaufen und sie auf der Konsole zu drucken. Mit der Klammernotation können wir den Eigenschaftswert als Variable abrufen, in diesem Fallkey. 

// Iterate through properties of gimli
for (let key in gimli) {
  console.log(gimli[key]);
}
OutputGimli
dwarf
battle axe

Wir können den Eigenschaftsnamen auch selbst mit nur der ersten Variablen in derfor...in-Schleife abrufen. Wir haben eine String-Methode fürconvert the key values to upper case verwendet. 

// Get keys and values of gimli properties
for (let key in gimli) {
  console.log(key.toUpperCase() + ':', gimli[key]);
}
OutputNAME: Gimli
RACE: dwarf
WEAPON: battle axe

Diefor...in-Schleife ist nicht mit derfor...of-Schleife zu verwechseln, die ausschließlich für den Array-Objekttyp verwendet wird. Weitere Informationen zum Durchlaufen von Arrays finden Sie im Tutorial „https://www.digitalocean.com/community/tutorials/understanding-arrays-injavascript#looping-through-an-array[Understanding Arrays in JavaScript]“.

Eine weitere nützliche Aufzählungsmethode ist dieObject.keys()-Methode, die ein Array der Schlüssel des Objekts zurückgibt. 

// Initialize method on gimli object to return property keys
Object.keys(gimli);
Output["name", "race", "weapon"]

Mit dieser Methode können wir mit den Schlüsseln oder Namen eines Objekts als Array arbeiten, sodass Sie alle für JavaScript-Arrays verfügbaren Methoden nutzen können.

Fazit

Objekte sind ein äußerst nützliches und vielseitiges Merkmal der Programmiersprache JavaScript. Sie sind einige der Hauptbausteine ​​für das Schreiben von Code in JavaScript und bieten eine praktische Möglichkeit, verwandte Daten und Funktionen zu organisieren. Aufgabenlisten, Einkaufswagen, Benutzerkonten und Speicherorte auf einer Webkarte sind nur einige der vielen Beispiele für realistische JavaScript-Objekte, auf die Sie möglicherweise stoßen.

In diesem Lernprogramm haben wir den Unterschied zwischen Eigenschaften und Methoden sowie das Erstellen von Objekten und das Hinzufügen, Entfernen, Ändern und Durchlaufen von Objekteigenschaften kennengelernt. Weitere Informationen zu JavaScript-Objekten finden Sie unterWorking with Objects im Mozilla Developer Network.

Related