Javascript Objekte

Definition von Javascript Objekten

Im Allgemeinen ist JavaScript als eine objektorientierte Programmiersprache bekannt. Daher sind in JavaScript Objekte die wichtigsten Datentypen und Formen. Sie unterscheiden sich völlig von den primitiven Datentypen in JavaScript. Wie im Kapitel “Datentypen” erwähnt, gibt es sieben Datentypen in JavaScript, von denen sechs als “primitiv” bezeichnet werden, da ihre Werte eine einzelne Sache beinhalten (es kann eine Zahl, ein String, usw. sein).

Im Gegensatz zu Datentypen verwenden wir Objekte zum Speichern von Schlüsselsammlungen unterschiedlicher Daten und komplizierterer Einheiten. In JavaScript sind Objekte in allen Aspekten der Sprache enthalten, daher musst du sie lernen, sobald du anfängst, die Sprache zu studieren.

Objekte werden mit geschweiften Klammern {…} angelegt und sollten eine Liste von Eigenschaften haben. Eine Eigenschaft wird als “Schlüssel: Wert” bezeichnet, wobei Schlüssel oder Eigenschaftsname ein String ist und Wert alles sein kann.

Du kannst ein leeres Objekt erstellen, indem du eine der folgenden Syntaxen ausführst:

let user = new Object(); // "object constructor" syntax
let user = {}; // "object literal" syntax

Gewöhnlich werden geschweifte Klammern {…} verwendet. Diese Deklaration wird als objektliteral bezeichnet.

Eigenschaften und Literale

Du kannst sofort Eigenschaften in den Klammern als Paare von “Schlüssel: Wert” eingeben, so:

Javascript create object

let site = { // an object name: "W3Docs", // by key "name" store value "W3Docs" }; console.log(site);

site hat eine Eigenschaft: den Namen "name" und den Wert "W3Docs".

Auf die Werte der Eigenschaften kann mit der Punktnotation zugegriffen werden, wie folgt:

Javascript get property values of the object

let site = { // an object name: "W3Docs", // by key "name" store value "W3Docs" }; // get property values of the object: console.log(site.name); // W3Docs

Es kann jeden Typ von Wert haben. Zum Beispiel:

Javascript object add a property

let site = { // an object name: "W3Docs", // by key "name" store value "W3Docs" }; site.haveAdmin = true; console.log(site);

Der Operator delete wird verwendet, um eine Eigenschaft zu löschen. Zum Beispiel:

Javascript object delete a property

let site = { // an object name: "W3Docs", // by key "name" store value "W3Docs" haveAdmin: true }; delete site.name; console.log(site);

Auch mehrteilige Eigenschaftsnamen können verwendet werden. Sie müssen jedoch wie folgt zitiert werden:

Javascript object multiword a property

let user = { site: "W3Docs", "teaches JS": true // multiword property name must be quoted }; console.log(user);

Beende die letzte Eigenschaft der Liste mit einem Komma:

Javascript objects

let site = { name: "W3Docs", haveAdmin: true, } console.log(site);

Eckige Klammern

Der Punkt-Zugriff funktioniert nicht für mehrteilige Eigenschaften. Hier ist ein Beispiel:

// this would give a syntax error
site.teaches JS = true

Der Punkt benötigt den Schlüssel, um ein gültiger Variablen-Identifikator zu sein. Das bedeutet, es gibt keine Einschränkungen, wie zum Beispiel Leerzeichen, etc.

Du kannst eine alternative eckige Klammer Notation verwenden. Sie funktioniert mit jedem String. Zum Beispiel:

Javascript objects with square bracket

let site = {}; // set site["teaches JS"] = true; // get console.log(site["teaches JS"]); // true // delete delete site["teaches JS"]; console.log(site);

Mit Hilfe der eckigen Klammern kannst du den Eigenschaftsnamen als Ergebnis eines beliebigen Ausdrucks so halten:

Javascript objects

let site = {}; let key = "teaches JS"; // same as site["teaches JS"] = true; site[key] = true; console.log(site);

In diesem Fall kann die Variable key entweder zur Laufzeit gemessen oder auf die Benutzereingabe abgestellt werden. Dann kannst du sie so verwenden, um auf die Eigenschaft zuzugreifen:

Javascript object properties

let site = { name: "W3Docs", }; let key = prompt("What do you want to know about the site?", "name"); console.log(site[key]); // If enter "name", you will see W3Docs

Beachte, dass du die Punkt-Notation nicht auf die gleiche Weise verwenden kannst:

Javascript objects can’t use the dot notation

let site = { name: "W3Docs" }; let key = "name"; console.log(site.key) // undefined

Berechnete Eigenschaften

Eckige Klammern werden auch in einem Objekt-Literal verwendet. Sie sind als berechnete Eigenschaften bekannt.

Hier ist ein Beispiel:

Javascript the object's property name is taken from the variable

let car = prompt("Which car do you like?", "bmw"); let color = { [car]: "white", // the property's name is taken from the variable car }; console.log(color.bmw); // white, if car="bmw"

Du kannst auch kompliziertere Ausdrücke in eckigen Klammern verwenden, so:

Javascript object's more complicated expressions in square brackets

let car = 'bmw'; let carColor = { [car + 'Color']: 'white' // carColor.bmwColor = 'white' }; console.log(carColor.bmwColor); // white

Wenn also der Name der Eigenschaft einfach und bekannt ist, kannst du Punkte verwenden. Und wenn du etwas Komplizierteres brauchst, dann wende dich an eckige Klammern.

Abkürzung für Eigenschaftswert

In echtem Code werden oft vorhandene Variablen als Werte für Eigenschaftsnamen verwendet.

Hier ist ein Beispiel:

Javascript object's property name values

function makeCar(name, model) { return { name: name, model: model, // ...other properties }; } let car = makeCar("BMW", "M5"); console.log(car.name); // BMW

function makeCar(name, model) {
  return {
    name, // same as name: name
    model // same as model: model
    // ...
  };
}

Sowohl normale Eigenschaften als auch Kurzformen können innerhalb des gleichen Projekts verwendet werden. Es sieht so aus:

Javascript objects

let car = { name, // same as name:name model: "M5" }; console.log(car);

Die “for...in”-Schleife

Die “for...in” Schleife ist eine einzigartige Form einer Schleife. Sie unterscheidet sich völlig von der for(;;).

Die Syntax ist folgende:

for (key in object) {
  // executes the body for each key among object properties
}

Lassen wir uns ein Beispiel ansehen, in dem alle Eigenschaften von car ausgegeben werden:

Javascript objects for in loop

let car = { name: "Mercedes", model: "C-Class Cabriolet", toDrive: true }; for (let key in car) { // keys console.log(key); // name, model, toDrive // values for the keys console.log(car[key]); // Mercedes, C-Class Cabriolet, true }

Beachte, dass alle Konstrukte von “for” die Möglichkeit bieten, die Schleifenvariable in der Schleife zu deklarieren. Zum Beispiel let key im oben gegebenen Beispiel. Anstelle des key kann auch ein anderer Variablenname verwendet werden.

Existenz überprüfen

Einer der bedeutendsten Vorteile von Objekten ist, dass sie den Zugriff auf jede Eigenschaft ermöglichen. Es wird kein Fehler auftreten, falls die Eigenschaft nicht existiert. Wenn du auf eine nicht vorhandene Eigenschaft zugreifst, wirst du zu undefined zurückgeführt. Das bietet die einzigartige Möglichkeit zu überprüfen, ob die Eigenschaft existiert oder nicht:

Javascript objects property is undefined

let car = {}; console.log(car.noSuchProperty === undefined); // true means "no such property"

Du kannst auch einen einzigartigen Operator "in" verwenden, um die Existenz einer Eigenschaft zu überprüfen. Um ihn auszuführen, benutze die folgende Syntax:

"key" in object

Kopie durch Referenz

Einer der wichtigsten Unterschiede zwischen Objekten und Primitiven ist, dass sie per Referenz gespeichert und kopiert werden können.

Du kannst primitive Werte (Strings, Zahlen, Booleans) als Ganze zuweisen/kopieren. Schau dir dieses Beispiel an:

Javascript primitive copy by value

let message = "Welcome to W3Docs!"; let phrase = message; console.log(phrase);

In der Folge hast du zwei unabhängige Variablen; jede von ihnen speichert den String “Willkommen bei W3Docs!”.

Objekte funktionieren nicht so.

Eine Variable speichert nicht das Objekt, sondern seine “Adresse im Speicher”. Mit anderen Worten, sie speichert nur eine Referenz darauf.

Zum Beispiel:

Javascript object

let car = { name: "BMW" }; console.log(car);

Wo das Objekt im Speicher ist, und die Variable car contains eine Referenz darauf. Immer wenn du eine Objektvariable kopierst, duplizierst du die Referenz, aber das Objekt wird nicht kopiert.

Zum Beispiel:

Javascript copy an object variable by reference

let car = { name: "BMW" }; let sportCar = car; // copy the reference console.log(sportCar);

Vergleich durch Referenz

In JavaScript können zwei Objekte nur dann als gleich betrachtet werden, wenn sie das gleiche Objekt sind.

Zum Beispiel sind zwei Variablen gleich, wenn sie auf dasselbe Objekt verweisen:

Javascript objects comparing

let obj1 = {}; let obj2 = obj1; // copy the reference console.log(obj1 == obj2); // true, both variables reference the same object console.log(obj1 === obj2); // true

Im folgenden Fall können zwei unabhängige Objekte nicht als gleich betrachtet werden, auch wenn beide leer sind:

Javascript objects comparing

let obj1 = {}; let obj2 = {}; // two independent objects console.log(obj1 == obj2); // false

Const object

Ein Objekt, das als const deklariert ist, kann verändert werden. Hier ist ein Beispiel:

Javascript const objects

const car = { name: "BMW" }; car.model = "M5"; // (*) console.log(car.model); // M5

Du könntest denken, dass das (*) einen Fehler auslöst, aber hier gibt es keinen Fehler. Du fragst dich vielleicht warum. Der Grund ist, dass const nur den Wert von car fixieren kann. Es wird nur dann einen Fehler verursachen, wenn du versuchst, car auf etwas anderes zu setzen, wie das:

Javascript const objects

const car = { name: "BMW" }; // Error (can't reassign car) car = { name: "Mercedes" }; console.log(car);

Klonen und Zusammenführen, Object.assign

Eine Objektvariable zu kopieren bedeutet, eine weitere Referenz zum gleichen Objekt zu erstellen.

Aber was tun, wenn du das Objekt duplizieren musst?

Sicherlich kannst du es klonen, aber das ist keine leichte Aufgabe, da JavaScript keine eingebaute Methode hat. Also, wenn du das tun musst, erstelle ein neues Objekt, das seine Struktur repliziert, und iteriere über die Eigenschaften und kopiere sie auf der primitiven Ebene. Das Beispiel ist wie folgt:

Javascript objects clone

Die Methode Object.assign wird dafür auch verwendet. Du musst nur die folgende Syntax verwenden:

Object.assign(dest, [src1, src2, src3...])

Es kann auch verwendet werden, um mehrere Objekte zusammenzuführen:

Javascript objects merging

In JavaScript sind Objekte viel mächtiger, als es auf den ersten Blick scheinen mag. Dies ist ein umfangreiches Thema, und du wirst in den nächsten Kapiteln mehr darüber erfahren.

Quizzeit: Testen Sie Ihre Fähigkeiten!

Sind Sie bereit, das Gelernte herauszufordern? Tauchen Sie ein in unsere interaktiven Quizze für ein tieferes Verständnis und eine unterhaltsame Art, Ihr Wissen zu festigen.