„Wenn ein Arbeiter seine Arbeit gut machen will, muss er zuerst seine Werkzeuge schärfen.“ – Konfuzius, „Die Gespräche des Konfuzius. Lu Linggong“
Titelseite > Programmierung > Ein Leitfaden zum Beherrschen von JavaScript-Objekten

Ein Leitfaden zum Beherrschen von JavaScript-Objekten

Veröffentlicht am 27.08.2024
Durchsuche:122

A Guide to Master JavaScript-Objects

Objekte sind ein grundlegender Bestandteil von JavaScript und dienen als Rückgrat für die Speicherung und Verwaltung von Daten. Ein Objekt ist eine Sammlung von Eigenschaften, und jede Eigenschaft ist eine Zuordnung zwischen einem Schlüssel (oder Namen) und einem Wert. Für jeden JavaScript-Entwickler ist es von entscheidender Bedeutung, zu verstehen, wie Objekte erstellt, manipuliert und genutzt werden. In diesem Artikel untersuchen wir die verschiedenen Objektfunktionen in JavaScript und stellen detaillierte Erklärungen, Beispiele und Kommentare bereit, die Ihnen bei der Beherrschung dieser Funktionen helfen.

Einführung in Objekte in JavaScript

In JavaScript werden Objekte zum Speichern von Datensammlungen und komplexeren Entitäten verwendet. Sie werden mithilfe von Objektliteralen oder dem Objektkonstruktor erstellt.

// Using object literals
let person = {
    name: "John",
    age: 30,
    city: "New York"
};

// Using the Object constructor
let person = new Object();
person.name = "John";
person.age = 30;
person.city = "New York";

Objekteigenschaften

  • Object.prototype: Jedes JavaScript-Objekt erbt Eigenschaften und Methoden von seinem Prototyp.
let obj = {};
console.log(obj.__proto__ === Object.prototype); // Output: true

Objektmethoden

1. Object.assign()

Kopiert die Werte aller aufzählbaren eigenen Eigenschaften von einem oder mehreren Quellobjekten in ein Zielobjekt. Es gibt das Zielobjekt zurück.

let target = {a: 1};
let source = {b: 2, c: 3};
Object.assign(target, source);
console.log(target); // Output: {a: 1, b: 2, c: 3}

2. Object.create()

Erstellt ein neues Objekt mit dem angegebenen Prototypobjekt und den angegebenen Eigenschaften.

let person = {
    isHuman: false,
    printIntroduction: function() {
        console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
    }
};

let me = Object.create(person);
me.name = "Matthew";
me.isHuman = true;
me.printIntroduction(); // Output: My name is Matthew. Am I human? true

3. Object.defineProperties()

Definiert neue oder ändert vorhandene Eigenschaften direkt an einem Objekt und gibt das Objekt zurück.

let obj = {};
Object.defineProperties(obj, {
    property1: {
        value: true,
        writable: true
    },
    property2: {
        value: "Hello",
        writable: false
    }
});
console.log(obj); // Output: { property1: true, property2: 'Hello' }

4. Object.defineProperty()

Definiert eine neue Eigenschaft direkt für ein Objekt oder ändert eine vorhandene Eigenschaft und gibt das Objekt zurück.

let obj = {};
Object.defineProperty(obj, 'property1', {
    value: 42,
    writable: false
});
console.log(obj.property1); // Output: 42
obj.property1 = 77; // No error thrown, but the property is not writable
console.log(obj.property1); // Output: 42

5. Object.entries()

Gibt ein Array der eigenen aufzählbaren, mit Zeichenfolgen versehenen Eigenschaftspaare [Schlüssel, Wert] eines bestimmten Objekts zurück.

let obj = {a: 1, b: 2, c: 3};
console.log(Object.entries(obj)); // Output: [['a', 1], ['b', 2], ['c', 3]]

6. Object.freeze()

Friert ein Objekt ein. Ein eingefrorenes Objekt kann nicht mehr geändert werden; Das Einfrieren eines Objekts verhindert, dass ihm neue Eigenschaften hinzugefügt werden, dass vorhandene Eigenschaften entfernt werden und dass die Werte vorhandener Eigenschaften nicht geändert werden.

let obj = {prop: 42};
Object.freeze(obj);
obj.prop = 33; // Fails silently in non-strict mode
console.log(obj.prop); // Output: 42

7. Object.fromEntries()

Transformiert eine Liste von Schlüssel-Wert-Paaren in ein Objekt.

let entries = new Map([['foo', 'bar'], ['baz', 42]]);
let obj = Object.fromEntries(entries);
console.log(obj); // Output: { foo: 'bar', baz: 42 }

8. Object.getOwnPropertyDescriptor()

Gibt einen Eigenschaftsdeskriptor für eine eigene Eigenschaft (d. h. eine Eigenschaft, die direkt auf einem Objekt vorhanden ist und nicht in der Prototypenkette des Objekts vorhanden ist) eines bestimmten Objekts zurück.

let obj = {property1: 42};
let descriptor = Object.getOwnPropertyDescriptor(obj, 'property1');
console.log(descriptor);
// Output: { value: 42, writable: true, enumerable: true, configurable: true }

9. Object.getOwnPropertyDescriptors()

Gibt ein Objekt zurück, das alle eigenen Eigenschaftsdeskriptoren eines Objekts enthält.

let obj = {property1: 42};
let descriptors = Object.getOwnPropertyDescriptors(obj);
console.log(descriptors);
/* Output:
{
  property1: {
    value: 42,
    writable: true,
    enumerable: true,
    configurable: true
  }
}
*/

10. Object.getOwnPropertyNames()

Gibt ein Array aller Eigenschaften zurück (einschließlich nicht aufzählbarer Eigenschaften mit Ausnahme derjenigen, die ein Symbol verwenden), die direkt auf einem bestimmten Objekt gefunden werden.

let obj = {a: 1, b: 2, c: 3};
let props = Object.getOwnPropertyNames(obj);
console.log(props); // Output: ['a', 'b', 'c']

11. Object.getOwnPropertySymbols()

Gibt ein Array aller Symboleigenschaften zurück, die direkt auf einem bestimmten Objekt gefunden werden.

let obj = {};
let sym = Symbol('foo');
obj[sym] = 'bar';
let symbols = Object.getOwnPropertySymbols(obj);
console.log(symbols); // Output: [Symbol(foo)]

12. Object.getPrototypeOf()

Gibt den Prototyp (d. h. den Wert der internen Eigenschaft [[Prototype]]) des angegebenen Objekts zurück.

let proto = {};
let obj = Object.create(proto);
console.log(Object.getPrototypeOf(obj) === proto); // Output: true

13. Object.is()

Bestimmt, ob zwei Werte den gleichen Wert haben.

console.log(Object.is('foo', 'foo')); // Output: true
console.log(Object.is({}, {})); // Output: false

14. Object.isExtensible()

Bestimmt, ob das Erweitern eines Objekts zulässig ist.

let obj = {};
console.log(Object.isExtensible(obj)); // Output: true
Object.preventExtensions(obj);
console.log(Object.isExtensible(obj)); // Output: false

15. Object.isFrozen()

Bestimmt, ob ein Objekt eingefroren ist.

let obj = {};
console.log(Object.isFrozen(obj)); // Output: false
Object.freeze(obj);
console.log(Object.isFrozen(obj)); // Output: true

16. Object.isSealed()

Bestimmt, ob ein Objekt versiegelt ist.

let obj = {};
console.log(Object.isSealed(obj)); // Output: false
Object.seal(obj);
console.log(Object.isSealed(obj)); // Output: true

17. Object.keys()

Gibt ein Array der aufzählbaren Eigenschaftsnamen eines bestimmten Objekts zurück, iteriert in derselben Reihenfolge wie eine normale Schleife.

let obj = {a: 1, b: 2, c: 3};
console.log(Object.keys(obj)); // Output: ['a', 'b', 'c']

18. Object.preventExtensions()

Verhindert jegliche Erweiterungen eines Objekts.

let obj = {};
Object.preventExtensions(obj);
obj.newProp = 'test'; // Throws an error in strict mode
console.log(obj.newProp); // Output: undefined

19. Object.seal()

Versiegelt ein Objekt, verhindert das Hinzufügen neuer Eigenschaften und markiert alle vorhandenen Eigenschaften als nicht konfigurierbar. Werte aktueller Eigenschaften können weiterhin geändert werden, solange sie beschreibbar sind.

let obj = {property1: 42};
Object.seal(obj);
obj.property1 = 33;
delete obj.property1; // Throws an error in strict mode
console.log(obj.property1); // Output: 33

20. Object.setPrototypeOf()

Setzt den Prototyp (d. h. die interne [[Prototype]]-Eigenschaft) eines angegebenen Objekts auf ein anderes Objekt oder null.

let proto = {};
let obj = {};
Object.setPrototypeOf(obj, proto);
console.log(Object.getPrototypeOf(obj) === proto); // Output: true

21. Object.values()

Gibt ein Array der aufzählbaren Eigenschaftswerte eines bestimmten Objekts in derselben Reihenfolge zurück, wie sie von einer for...in-Schleife bereitgestellt wird.

let obj = {a: 1, b: 2, c: 3};
console.log(Object.values(obj)); // Output: [1, 2, 3]

Praxisbeispiele

Beispiel 1: Klonen eines Objekts

Verwenden von Object.assign() zum Klonen eines Objekts.

let obj = {a: 1, b: 2};
let clone = Object.assign({}, obj);
console.log(clone); // Output: {a: 1, b: 2}

Beispiel 2: Objekte zusammenführen

Objekte mit Object.assign() zusammenführen.

let obj1 = {a: 1, b: 2};
let obj2 = {b: 3, c: 4};
let merged = Object.assign({},

 obj1, obj2);
console.log(merged); // Output: {a: 1, b: 3, c: 4}

Beispiel 3: Erstellen eines Objekts mit einem angegebenen Prototyp

Verwenden von Object.create() zum Erstellen eines Objekts mit einem angegebenen Prototyp.

let proto = {greet: function() { console.log("Hello!"); }};
let obj = Object.create(proto);
obj.greet(); // Output: Hello!

Beispiel 4: Unveränderliche Eigenschaften definieren

Verwenden von Object.defineProperty() zum Definieren unveränderlicher Eigenschaften.

let obj = {};
Object.defineProperty(obj, 'immutableProp', {
    value: 42,
    writable: false
});
console.log(obj.immutableProp); // Output: 42
obj.immutableProp = 77; // Throws an error in strict mode
console.log(obj.immutableProp); // Output: 42

Beispiel 5: Konvertieren eines Objekts in ein Array

Verwenden von Object.entries() zum Konvertieren eines Objekts in ein Array von Schlüssel-Wert-Paaren.

let obj = {a: 1, b: 2, c: 3};
let entries = Object.entries(obj);
console.log(entries); // Output: [['a', 1], ['b', 2], ['c', 3]]

Abschluss

Objekte sind eine Kernkomponente von JavaScript und bieten eine flexible Möglichkeit, Daten zu verwalten und zu bearbeiten. Durch die Beherrschung von Objektfunktionen können Sie komplexe Vorgänge problemlos ausführen und effizienteren und wartbareren Code schreiben. Dieser umfassende Leitfaden behandelt die wichtigsten Objektfunktionen in JavaScript, komplett mit detaillierten Beispielen und Erklärungen. Üben Sie die Verwendung dieser Funktionen und experimentieren Sie mit verschiedenen Anwendungsfällen, um Ihr Verständnis zu vertiefen und Ihre Programmierfähigkeiten zu verbessern.

Freigabeerklärung Dieser Artikel ist abgedruckt unter: https://dev.to/imsushant12/a-guide-to-master-javascript-objects-362b?1 Bei Verstößen wenden Sie sich bitte an [email protected], um ihn zu löschen
Neuestes Tutorial Mehr>

Haftungsausschluss: Alle bereitgestellten Ressourcen stammen teilweise aus dem Internet. Wenn eine Verletzung Ihres Urheberrechts oder anderer Rechte und Interessen vorliegt, erläutern Sie bitte die detaillierten Gründe und legen Sie einen Nachweis des Urheberrechts oder Ihrer Rechte und Interessen vor und senden Sie ihn dann an die E-Mail-Adresse: [email protected] Wir werden die Angelegenheit so schnell wie möglich für Sie erledigen.

Copyright© 2022 湘ICP备2022001581号-3