Heim > Web-Frontend > js-Tutorial > Beherrschen von JavaScript-Objekten: Vergleichs-, Manipulations- und Kontrolltechniken

Beherrschen von JavaScript-Objekten: Vergleichs-, Manipulations- und Kontrolltechniken

Linda Hamilton
Freigeben: 2024-11-12 01:32:03
Original
480 Leute haben es durchsucht

Mastering JavaScript Objects: Comparison, Manipulation, and Control Techniques

JavaScript-Objekte sind unglaublich leistungsfähig und vielseitig. Sie ermöglichen uns die Speicherung komplexer Daten und verfügen über eine Vielzahl integrierter Methoden, die die Datenmanipulation erleichtern. Schauen wir uns einige der nützlichsten Objektmethoden an und wie sie miteinander verglichen werden.


1. Objektvergleich

Der direkte Vergleich von Objekten mit === funktioniert nicht, da JavaScript den Vergleich anhand der Referenz und nicht anhand des Werts durchführt. Zum Beispiel:

const obj1 = { a: 1 };
const obj2 = { a: 1 };
console.log(obj1 === obj2); // false
Nach dem Login kopieren
Nach dem Login kopieren

Um die Inhalte zu vergleichen, verwenden Sie eine Tiefenvergleichsfunktion oder eine Bibliothek wie Lodash.


2. Objektdeskriptoren

Eigenschaftsdeskriptoren stellen Metadaten über die Eigenschaften eines Objekts bereit. Zum Beispiel:

Wert: Wert der Immobilie
beschreibbar: Kann der Wert geändert werden?
aufzählbar: Ist es in Schleifen sichtbar?
konfigurierbar: Kann es geändert werden?

const obj = { name: "Alice" };
const descriptor = Object.getOwnPropertyDescriptor(obj, "name");
console.log(descriptor);
Nach dem Login kopieren

3. Extrahieren von Schlüsseln, Werten und Einträgen

Object.keys(): Gibt ein Array der Schlüssel eines Objekts zurück.
Object.values(): Gibt ein Array von Werten zurück.
Object.entries(): Gibt ein Array von Schlüssel-Wert-Paaren zurück.

const person = { name: "Alice", age: 25 };
console.log(Object.keys(person));   // ["name", "age"]
console.log(Object.values(person)); // ["Alice", 25]
console.log(Object.entries(person)); // [["name", "Alice"], ["age", 25]]
Nach dem Login kopieren

4. Objekte zusammenführen und klonen

Object.assign() kopiert Eigenschaften von einem Objekt auf ein anderes. Es führt nur eine flache Kopie durch, sodass verschachtelte Objekte nicht tief geklont werden.

const target = { a: 1 };
const source = { b: 2 };
Object.assign(target, source);
console.log(target); // { a: 1, b: 2 }
Nach dem Login kopieren

5. Object.create()

Diese Methode erstellt ein neues Objekt unter Verwendung eines angegebenen Prototyps. Nützlich für die Vererbung:

const personPrototype = {
  greet() { return `Hello, ${this.name}`; }
};
const person = Object.create(personPrototype);
person.name = "Alice";
console.log(person.greet()); // "Hello, Alice"
Nach dem Login kopieren

6. Object.is()

Diese Methode prüft, ob zwei Werte gleich sind, unterscheidet sogar zwischen 0 und -0 oder vergleicht NaN korrekt.

console.log(Object.is(+0, -0)); // false
console.log(Object.is(NaN, NaN)); // true
Nach dem Login kopieren

7. Object.getOwnPropertyDescriptors()

Ruft Deskriptoren aller Eigenschaften ab. Nützlich für tiefe Kopien mit nicht standardmäßigen Deskriptoren:

const obj = { name: "Alice" };
console.log(Object.getOwnPropertyDescriptors(obj));
Nach dem Login kopieren

8. Object.getOwnPropertyNames()

Gibt alle Eigenschaftsnamen zurück, einschließlich der nicht aufzählbaren.

const obj = { a: 1 };
Object.defineProperty(obj, "b", { value: 2, enumerable: false });
console.log(Object.getOwnPropertyNames(obj)); // ["a", "b"]
Nach dem Login kopieren

9. Object.seal()

Versiegelt ein Objekt und erlaubt Änderungen an vorhandenen Eigenschaften, aber keine Hinzufügungen oder Löschungen.

const obj = { name: "Alice" };
Object.seal(obj);
obj.age = 30; // Fails
console.log(obj); // { name: "Alice" }
Nach dem Login kopieren

10. Object.freeze()

Friert ein Objekt ein und verhindert so jegliche Änderungen.

const obj = { name: "Alice" };
Object.freeze(obj);
obj.name = "Bob"; // Fails
console.log(obj); // { name: "Alice" }
Nach dem Login kopieren

11. Object.assign()

Dies wird zum Kopieren von Eigenschaften von mehreren Quellobjekten in ein Zielobjekt verwendet.

const obj1 = { a: 1 };
const obj2 = { a: 1 };
console.log(obj1 === obj2); // false
Nach dem Login kopieren
Nach dem Login kopieren

Abschluss

JavaScript bietet ein Arsenal an Methoden für die Arbeit mit Objekten, von denen jede einem bestimmten Zweck dient. Indem Sie verstehen, wie und wann diese Methoden verwendet werden, können Sie das Verhalten von Objekten steuern, ihre Eigenschaften ändern oder sie sogar vor Änderungen sperren.

Das obige ist der detaillierte Inhalt vonBeherrschen von JavaScript-Objekten: Vergleichs-, Manipulations- und Kontrolltechniken. 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