Heim > Web-Frontend > js-Tutorial > Objekte in JavaScript beherrschen

Objekte in JavaScript beherrschen

Susan Sarandon
Freigeben: 2024-12-25 09:11:56
Original
621 Leute haben es durchsucht

Mastering Objects in JavaScript

Objekte in JavaScript

In JavaScript sind Objekte Sammlungen von Schlüssel-Wert-Paaren, wobei Werte Daten (Eigenschaften) oder Funktionen (Methoden) sein können. Objekte sind für JavaScript von grundlegender Bedeutung, da fast alles in JavaScript ein Objekt ist, einschließlich Arrays, Funktionen und sogar anderer Objekte.


1. Objekte erstellen

A. Objektliteral

Der einfachste Weg, ein Objekt zu erstellen, ist die Verwendung von geschweiften Klammern {}.

Beispiel:

const person = {
  name: "Alice",
  age: 25,
  greet: function () {
    console.log("Hello!");
  },
};

console.log(person.name); // Output: Alice
person.greet(); // Output: Hello!
Nach dem Login kopieren
Nach dem Login kopieren

B. Objektkonstruktor

Mit dem Objektkonstruktor wird ein leeres Objekt erstellt.

Beispiel:

const person = new Object();
person.name = "Bob";
person.age = 30;
person.greet = function () {
  console.log("Hi!");
};

console.log(person.name); // Output: Bob
person.greet(); // Output: Hi!
Nach dem Login kopieren
Nach dem Login kopieren

C. Verwenden von Object.create()

Diese Methode erstellt ein neues Objekt mit dem angegebenen Prototyp.

Beispiel:

const prototype = { greet: function () { console.log("Hello!"); } };
const person = Object.create(prototype);
person.name = "Charlie";
console.log(person.name); // Output: Charlie
person.greet(); // Output: Hello!
Nach dem Login kopieren
Nach dem Login kopieren

2. Auf Objekteigenschaften zugreifen

A. Punktnotation

Zugriff auf Eigenschaften mit einem Punkt (.).

Beispiel:

console.log(person.name); // Output: Alice
Nach dem Login kopieren
Nach dem Login kopieren

B. Klammernotation

Zugriff auf Eigenschaften mit eckigen Klammern ([]). Nützlich für dynamische Eigenschaftsnamen.

Beispiel:

console.log(person["name"]); // Output: Alice
const key = "age";
console.log(person[key]); // Output: 25
Nach dem Login kopieren
Nach dem Login kopieren

3. Eigenschaften hinzufügen, ändern und löschen

  • Hinzufügen:
person.country = "USA";
console.log(person.country); // Output: USA
Nach dem Login kopieren
  • Ändern:
person.age = 26;
console.log(person.age); // Output: 26
Nach dem Login kopieren
  • Löschen:
delete person.age;
console.log(person.age); // Output: undefined
Nach dem Login kopieren

4. Methoden in Objekten

Wenn eine Funktion eine Eigenschaft eines Objekts ist, wird sie als Methode bezeichnet.

Beispiel:

const car = {
  brand: "Tesla",
  start: function () {
    console.log("Car started!");
  },
};

car.start(); // Output: Car started!
Nach dem Login kopieren

5. Durchlaufen von Objekteigenschaften

A. Verwendung von for...in

Iterieren Sie alle aufzählbaren Eigenschaften eines Objekts.

Beispiel:

for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}
Nach dem Login kopieren

B. Verwenden von Object.keys()

Gibt ein Array der Schlüssel eines Objekts zurück.

Beispiel:

Object.keys(person).forEach((key) => {
  console.log(`${key}: ${person[key]}`);
});
Nach dem Login kopieren

C. Verwenden von Object.entries()

Gibt ein Array von [Schlüssel-Wert]-Paaren zurück.

Beispiel:

Object.entries(person).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});
Nach dem Login kopieren

6. Objektmethoden

JavaScript bietet mehrere integrierte Methoden zum Arbeiten mit Objekten.

  • Object.assign(): Kopiert Eigenschaften von einem Objekt auf ein anderes.
const person = {
  name: "Alice",
  age: 25,
  greet: function () {
    console.log("Hello!");
  },
};

console.log(person.name); // Output: Alice
person.greet(); // Output: Hello!
Nach dem Login kopieren
Nach dem Login kopieren
  • Object.freeze(): Verhindert die Änderung eines Objekts.
const person = new Object();
person.name = "Bob";
person.age = 30;
person.greet = function () {
  console.log("Hi!");
};

console.log(person.name); // Output: Bob
person.greet(); // Output: Hi!
Nach dem Login kopieren
Nach dem Login kopieren
  • Object.seal(): Verhindert das Hinzufügen oder Entfernen von Eigenschaften, ermöglicht jedoch die Änderung vorhandener Eigenschaften.
const prototype = { greet: function () { console.log("Hello!"); } };
const person = Object.create(prototype);
person.name = "Charlie";
console.log(person.name); // Output: Charlie
person.greet(); // Output: Hello!
Nach dem Login kopieren
Nach dem Login kopieren

7. Prototypen und Vererbung

Objekte in JavaScript haben einen Prototyp, bei dem es sich um ein weiteres Objekt handelt, von dem sie Eigenschaften und Methoden erben.

Beispiel:

console.log(person.name); // Output: Alice
Nach dem Login kopieren
Nach dem Login kopieren

8. Objektzerstörung

Destrukturierung ermöglicht das Extrahieren von Eigenschaften aus einem Objekt in Variablen.

Beispiel:

console.log(person["name"]); // Output: Alice
const key = "age";
console.log(person[key]); // Output: 25
Nach dem Login kopieren
Nach dem Login kopieren

9. Zusammenfassung

  • Objekte sind Schlüssel-Wert-Paare, die Eigenschaften und Methoden speichern können.
  • Verwenden Sie Objektliterale zur einfachen Objekterstellung.
  • Zugriff auf Objekteigenschaften mithilfe der Punkt- oder Klammernotation.
  • Verwenden Sie integrierte Methoden wie Object.keys(), Object.assign() und Object.freeze() für eine effektive Objektmanipulation.
  • Das Beherrschen von Objekten ist entscheidend für das Verständnis fortgeschrittener JavaScript-Konzepte wie Prototypen und Vererbung.

Hallo, ich bin Abhay Singh Kathayat!
Ich bin ein Full-Stack-Entwickler mit Fachwissen sowohl in Front-End- als auch in Back-End-Technologien. Ich arbeite mit einer Vielzahl von Programmiersprachen und Frameworks, um effiziente, skalierbare und benutzerfreundliche Anwendungen zu erstellen.
Sie können mich gerne unter meiner geschäftlichen E-Mail-Adresse erreichen: kaashshorts28@gmail.com.

Das obige ist der detaillierte Inhalt vonObjekte in JavaScript beherrschen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage