JavaScript - Objekte: Ein Anfängerleitfaden

Hallo da draußen, ambitionierte Programmierer! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt der JavaScript-Objekte zu sein. Als jemand, der seit Jahren Programmieren unterrichtet, kann ich Ihnen sagen, dass das Verständnis von Objekten wie das Entschlüsseln eines geheimen Superkräfte in JavaScript ist. Also, tauchen wir ein!

Was sind JavaScript-Objekte?

Stellen Sie sich vor, Sie beschreiben Ihren Hund. Sie könnten sagen, er hat einen Namen, ein Alter, eine Rasse und ein Lieblingsspielzeug. In JavaScript können wir diesen Hund als Objekt darstellen, mit all diesen Merkmalen als seine Eigenschaften. Lassen Sie uns unser erstes Objekt erstellen:

let myDog = {
name: "Buddy",
age: 3,
breed: "Golden Retriever",
favoriteToy: "quietschende Kugel"
};

Das nennen wir eine Objektliterale. Es ist wie ein Behälter, der相关信息 speichert. Jede Information ist eine Eigenschaft, mit einem Namen (wie "name" oder "age") und einem Wert ("Buddy" oder 3).

Objekteigenschaften

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

1. Punktnotation:

   console.log(myDog.name); // Ausgabe: Buddy

2. Klammernotation:

   console.log(myDog["age"]); // Ausgabe: 3

Beide machen dasselbe, aber die Klammernotation ist praktisch, wenn Ihr Eigenschaftsname in einer Variable gespeichert ist oder Leerzeichen enthält.

Wir können auch neue Eigenschaften zu unserem Objekt hinzufügen:

myDog.isGoodBoy = true;
console.log(myDog.isGoodBoy); // Ausgabe: true

Oder bestehende ändern:

myDog.age = 4;
console.log(myDog.age); // Ausgabe: 4

Objektmethoden

Methoden sind Funktionen, die zu einem Objekt gehören. Sie sind wie die Aktionen, die unser Objekt ausführen kann. Lassen Sie uns eine Methode zu unserem myDog-Objekt hinzufügen:

myDog.bark = function() {
console.log("Wuff wuff!");
};

myDog.bark(); // Ausgabe: Wuff wuff!

Jetzt kann unser Hund bellen! Ist das nicht toll?

Erstellen neuer Objekte

Wir haben gesehen, wie man Objekte mit Objektliteralen erstellt, aber es gibt noch eine andere Methode mit dem Object()-Konstruktor:

let myCat = new Object();
myCat.name = "Whiskers";
myCat.age = 5;
myCat.meow = function() {
console.log("Miau!");
};

myCat.meow(); // Ausgabe: Miau!

Diese Methode ist weniger gebräuchlich, aber es ist gut zu wissen, dass sie existiert.

Methoden für ein Objekt definieren

Wir können Methoden genauso wie Eigenschaften beim Erstellen des Objekts definieren:

let myParrot = {
name: "Polly",
age: 2,
speak: function() {
console.log("Polly will ein Crackern!");
}
};

myParrot.speak(); // Ausgabe: Polly will ein Crackern!

Es gibt auch eine Kurzform zur Definition von Methoden:

let myHamster = {
name: "Fuzzy",
age: 1,
run() {
console.log("Laufen auf dem Rad!");
}
};

myHamster.run(); // Ausgabe: Laufen auf dem Rad!

Das 'with'-Schlüsselwort

Das with-Schlüsselwort kann Ihren Code kürzer machen, wenn Sie mit Eigenschaften desselben Objekts mehrmals arbeiten:

with(myDog) {
console.log(name);
console.log(age);
bark();
}

Seien Sie jedoch vorsichtig mit with, da es Ihren Code unklarer machen kann und nicht in strengem Modus empfohlen wird.

JavaScript-eingebaute Objekte

JavaScript kommt mit mehreren eingebauten Objekten, die nützliche Funktionalitäten bieten. Hier sind einige der häufigsten:

Objekt	Beschreibung
String	Representiert und manipuliert Text
Number	Representiert numerische Werte
Boolean	Representiert true/false-Werte
Array	Representiert eine Liste von Werten
Math	Bietet mathematische Operationen
Date	Representiert Daten und Zeiten

Sehen wir uns einige Beispiele an:

let greeting = "Hallo, Welt!";
console.log(greeting.length); // Ausgabe: 13

let pi = Math.PI;
console.log(pi); // Ausgabe: 3.141592653589793

let today = new Date();
console.log(today); // Ausgabe: aktuelle Datum und Uhrzeit

JavaScript-Objektmethoden

Objekte in JavaScript kommen mit einigen eingebauten Methoden. Hier sind einige wichtige:

Methode	Beschreibung
Object.keys()	Gibt ein Array der Eigenschaftsnamen eines Objekts zurück
Object.values()	Gibt ein Array der Eigenschaftswerte eines Objekts zurück
Object.entries()	Gibt ein Array der [Schlüssel, Wert]-Paare eines Objekts zurück
Object.assign()	Kopiert Eigenschaften von einem Objekt zu einem anderen

Sehen wir uns diese in Aktion an:

let keys = Object.keys(myDog);
console.log(keys); // Ausgabe: ["name", "age", "breed", "favoriteToy", "isGoodBoy", "bark"]

let values = Object.values(myDog);
console.log(values); // Ausgabe: ["Buddy", 4, "Golden Retriever", "quietschende Kugel", true, ƒ]

let entries = Object.entries(myDog);
console.log(entries); // Ausgabe: [["name", "Buddy"], ["age", 4], ...]

let newDog = Object.assign({}, myDog);
console.log(newDog); // Ausgabe: eine Kopie von myDog

Und das war's! Sie haben gerade Ihre ersten Schritte in die Welt der JavaScript-Objekte gemacht. Erinnern Sie sich daran, Übung macht den Meister,also haben Sie keine Angst, Ihre eigenen Objekte und Methoden zu erstellen. Bevor Sie es wissen, werden Sie Objekte wie ein Profi programmieren können!

Frohes Coden und möge Ihre Objekte immer bugfrei sein!

Credits: Image by storyset