Ein Leitfaden zum Beherrschen von JavaScript-Objekten

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, damit Sie diese besser beherrschen.

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; Durch das Einfrieren eines Objekts wird verhindert, dass ihm neue Eigenschaften hinzugefügt werden, vorhandene Eigenschaften entfernt werden und 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 enthalten 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 Eigenschaftsbeschreibungen 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 [[Prototype]]-Eigenschaft) 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 derselbe Wert sind.

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 Erweiterung 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 eigenen 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

Verwenden von Object.assign() zum Zusammenführen von Objekten.

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}

Example 3: Creating an Object with a Specified Prototype

Using Object.create() to create an object with a specified prototype.

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

Example 4: Defining Immutable Properties

Using Object.defineProperty() to define immutable properties.

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

Example 5: Converting an Object to an Array

Using Object.entries() to convert an object to an array of key-value pairs.

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

Conclusion

Objects are a core component of JavaScript, offering a flexible way to manage and manipulate data. By mastering object functions, you can perform complex operations with ease and write more efficient and maintainable code. This comprehensive guide has covered the most important object functions in JavaScript, complete with detailed examples and explanations. Practice using these functions and experiment with different use cases to deepen your understanding and enhance your coding skills.

Das obige ist der detaillierte Inhalt vonEin Leitfaden zum Beherrschen von JavaScript-Objekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!