„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 > Grundlegende Objektmethoden in JavaScript verstehen

Grundlegende Objektmethoden in JavaScript verstehen

Veröffentlicht am 04.11.2024
Durchsuche:270

Understanding Key Object Methods in JavaScript

JavaScripts Object ist vollgepackt mit einer Reihe nützlicher Methoden, die Entwicklern helfen, Objekte einfach zu manipulieren. Lassen Sie uns einige der wichtigsten durchgehen, mit kurzen Erklärungen und Beispielen

  1. Object.create()
  2. Object.assign()
  3. Object.keys()
  4. Object.values()
  5. Object.entries()
  6. Object.freeze()
  7. Object.seal()
  8. Object.preventExtensions()
  9. Object.getPrototypeOf()
  10. Object.setPrototypeOf()
  11. Object.defineProperty()
  12. Object.defineProperties()
  13. Object.getOwnPropertyDescriptor()
  14. Object.getOwnPropertyDescriptors()
  15. Object.getOwnPropertyNames()
  16. Object.is()
  17. Object.isFrozen()
  18. Object.isSealed()
  19. Object.isExtensible()
  20. Object.fromEntries()
  21. Object.hasOwnProperty()
  22. Object.hasOwn()
  23. Object.groupBy() (vorgeschlagene Funktion, möglicherweise nicht vollständig verfügbar)

Object.create()
Object.create() ist eine Methode in JavaScript, mit der ein neues Objekt mit einem angegebenen Prototypobjekt und optionalen Eigenschaften erstellt wird. Es ermöglicht eine detailliertere Kontrolle über den Prototyp und die Eigenschaften eines Objekts im Vergleich zur Verwendung von Objektliteralen oder Konstruktoren.

const personPrototype = {
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

const john = Object.create(personPrototype);
john.name = "John";
john.greet();  // Output: Hello, my name is John

Object.assign()
Object.assign() ist eine integrierte JavaScript-Methode, mit der die Werte aller aufzählbaren eigenen Eigenschaften von einem oder mehreren Quellobjekten in ein Zielobjekt kopiert werden. Es führt eine flache Kopie durch und gibt das geänderte Zielobjekt zurück.

const target = { a: 1 };
const source = { b: 2, c: 3 };
const result = Object.assign(target, source);
console.log(result);  // Output: { a: 1, b: 2, c: 3 }
console.log(target);  // Output: { a: 1, b: 2, c: 3 } (target is also modified)

Object.keys()
Gibt ein Array der eigenen aufzählbaren Eigenschaftsnamen (Schlüssel) des Objekts zurück

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

Object.values()
Gibt ein Array der aufzählbaren Eigenschaftswerte des Objekts zurück

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

Object.entries()
Gibt ein Array der aufzählbaren Eigenschaftspaare [Schlüssel, Wert] des Objekts
zurück.

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

Object.freeze()
Friert das Objekt ein und verhindert, dass neue Eigenschaften hinzugefügt oder vorhandene Eigenschaften geändert oder gelöscht werden

const obj = { a: 1 };
Object.freeze(obj);
obj.a = 2;  // No effect, because the object is frozen
console.log(obj.a);  // Output: 1

Object.seal()
Versiegelt das Objekt und verhindert so das Hinzufügen neuer Eigenschaften, ermöglicht jedoch die Änderung bestehender Eigenschaften.

const obj = { a: 1 };
Object.seal(obj);
obj.a = 2;  // Allowed
delete obj.a;  // Not allowed
console.log(obj.a);  // Output: 2

Object.preventExtensions()
Verhindert, dass dem Objekt neue Eigenschaften hinzugefügt werden, ermöglicht jedoch die Änderung und Löschung vorhandener Eigenschaften

const obj = { a: 1 };
Object.preventExtensions(obj);
obj.b = 2;  // Not allowed
console.log(obj.b);  // Output: undefined

Object.getPrototypeOf()
Gibt den Prototyp (d. h. den internen [[Prototyp]]) des angegebenen Objekts zurück

const obj = {};
const proto = Object.getPrototypeOf(obj);
console.log(proto);  // Output: {} (the default Object prototype)

Object.setPrototypeOf()
Legt den Prototyp eines angegebenen Objekts fest.

const proto = { greet() { console.log('Hello!'); } };
const obj = {};
Object.setPrototypeOf(obj, proto);
obj.greet();  // Output: 'Hello!'

Object.defineProperty()
Definiert eine neue Eigenschaft für ein Objekt oder ändert eine vorhandene, mit zusätzlichen Optionen für Eigenschaftsdeskriptoren (z. B. beschreibbar, konfigurierbar).

const obj = {};
Object.defineProperty(obj, 'a', {
  value: 42,
  writable: false,  // Cannot modify the value
});
obj.a = 100;  // No effect because writable is false
console.log(obj.a);  // Output: 42

Object.defineProperties()
Definiert mehrere Eigenschaften für ein Objekt mit Eigenschaftsdeskriptoren.

const obj = {};
Object.defineProperties(obj, {
  a: { value: 42, writable: false },
  b: { value: 100, writable: true }
});
console.log(obj.a);  // Output: 42
console.log(obj.b);  // Output: 100

Object.getOwnPropertyDescriptor()
Gibt den Deskriptor für eine Eigenschaft eines Objekts zurück.

const obj = { a: 1 };
const descriptor = Object.getOwnPropertyDescriptor(obj, 'a');
console.log(descriptor);  
// Output: { value: 1, writable: true, enumerable: true, configurable: true }

Object.getOwnPropertyDescriptors()
Gibt ein Objekt zurück, das alle Eigenschaftsdeskriptoren für die eigenen Eigenschaften eines Objekts enthält

const obj = { a: 1 };
const descriptors = Object.getOwnPropertyDescriptors(obj);
console.log(descriptors);
// Output: { a: { value: 1, writable: true, enumerable: true, configurable: true } }

Object.getOwnPropertyNames()
Gibt ein Array aller Eigenschaften (einschließlich nicht aufzählbarer) zurück, die direkt auf einem Objekt gefunden werden.

const obj = { a: 1 };
Object.defineProperty(obj, 'b', { value: 2, enumerable: false });
console.log(Object.getOwnPropertyNames(obj));  // Output: ['a', 'b']

Object.is()
Vergleicht, ob zwei Werte gleich sind (wie ===, behandelt aber Sonderfälle wie NaN)

console.log(Object.is(NaN, NaN));  // Output: true
console.log(Object.is( 0, -0));    // Output: false

Object.isFrozen()
Prüft, ob ein Objekt eingefroren ist

const obj = Object.freeze({ a: 1 });
console.log(Object.isFrozen(obj));  // Output: true

Object.isSealed()
Überprüft, ob ein Objekt versiegelt ist.

const obj = Object.seal({ a: 1 });
console.log(Object.isSealed(obj));  // Output: true

Object.isExtensible()
Prüft, ob einem Objekt neue Eigenschaften hinzugefügt werden können.

const obj = { a: 1 };
Object.preventExtensions(obj);
console.log(Object.isExtensible(obj));  // Output: false

Object.fromEntries()
Konvertiert ein Array von Schlüssel-Wert-Paaren in ein Objekt

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

Object.hasOwnProperty()
Prüft, ob ein Objekt die angegebene Eigenschaft als seine eigene hat (nicht geerbt)

const obj = { a: 1 };
console.log(obj.hasOwnProperty('a'));  // Output: true

Object.hasOwn()
Object.hasOwn() ist eine neuere Methode, die in ES2022 als Alternative zu Object.hasOwnProperty() eingeführt wurde. Es prüft, ob ein Objekt eine direkte (eigene) Eigenschaft mit einem angegebenen Schlüssel hat, ohne die Prototypenkette nachzuschlagen.

const obj = {
  name: 'Alice',
  age: 25
};

console.log(Object.hasOwn(obj, 'name'));  // true
console.log(Object.hasOwn(obj, 'gender'));  // false

Object.groupBy
Object.groupBy ist eine relativ neue Funktion, die für JavaScript in ECMAScript 2024 vorgeschlagen wird und es Ihnen ermöglicht, Objekte basierend auf einem gemeinsamen Kriterium zu gruppieren. Es ist noch nicht in allen Umgebungen allgemein verfügbar, daher funktioniert es möglicherweise nicht in vielen Browsern oder JavaScript-Engines, bis es vollständig implementiert ist.

const array = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 25 },
  { name: 'David', age: 30 },
];

// Group objects by age
const groupedByAge = Object.groupBy(array, item => item.age);

console.log(groupedByAge);

/*
Expected Output:
{
  25: [
    { name: 'Alice', age: 25 },
    { name: 'Charlie', age: 25 }
  ],
  30: [
    { name: 'Bob', age: 30 },
    { name: 'David', age: 30 }
  ]
}
*/

Freigabeerklärung Dieser Artikel ist abgedruckt unter: https://dev.to/muthuraja_r/javascript-object-methods-33n1?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