Eigenschaft aus einem Objekt in JavaScript entfernen

1. Verwenden Sie den delete-Operator, um eine Eigenschaft aus einem Objekt in JavaScript zu entfernen
2. Verwendung der Bibliothek underscore zum Entfernen einer Eigenschaft aus einem Objekt in JavaScript
3. Verwenden der spread-Syntax zum Entfernen einer Eigenschaft aus einem Objekt in JavaScript ECMAScript 6

Dieses Tutorial wird erklären, wie wir eine Eigenschaft von einem Objekt in JavaScript mit mehreren Methoden entfernen können. Wir werden die Verwendung des delete Operators, des reassignment Mechanismus, der underscore Bibliothek und der spread Syntax in ECMAScript 6 demonstrieren.

Verwenden Sie den delete-Operator, um eine Eigenschaft aus einem Objekt in JavaScript zu entfernen

Eine Methode, um eine beliebige Eigenschaft eines Objekts zu entfernen, ist der delete-Operator. Dieser Operator entfernt die Eigenschaft aus dem Objekt. Ein Beispiel: Wir haben ein Objekt myObject mit den Eigenschaften id, subject und grade, und wir müssen die Eigenschaft grade entfernen.

var myObject = {'id': '12345', 'subject': 'programming', 'grade': 'A'};

console.log('Original object:', myObject);
// delete the grade property
delete myObject.grade
console.log('Updated object: ', myObject)

Ausgabe:

Original object: {id: "12345", subject: "programming", grade: "A"}
Updated object:  {id: "12345", subject: "programming"}

Verwendung der Bibliothek underscore zum Entfernen einer Eigenschaft aus einem Objekt in JavaScript

Eine der Bibliotheken, die beim Entfernen einer Eigenschaft von einem Objekt in JavaScript helfen kann, ohne das ursprüngliche Objekt zu aktualisieren, ist die underscore-Bibliothek. Diese Bibliothek bietet zwei wichtige Funktionen _.pick() und _.omit().

Die Funktion _.omit() könnte die angegebene Eigenschaft aus dem Objekt entfernen und eine aktualisierte Kopie zurückgeben.

var myObject = {'id': '12345', 'subject': 'programming', 'grade': 'A'};

console.log('Original object:', myObject);

var updatedObject = _.omit(myObject, 'grade')
console.log('Updated object with omit() : ', updatedObject)
console.log('Original object after update:', myObject);

Ausgabe:

Original object: {id: "12345", subject: "programming", grade: "A"}
Updated object with omit() :  {id: "12345", subject: "programming"}
Original object after update: {id: "12345", subject: "programming", grade: "A"}

Die Funktion _.pick() bezieht nur die angegebenen Eigenschaften des Objekts ein und vernachlässigt alle anderen Eigenschaften und gibt eine aktualisierte Kopie von diesem Objekt zurück.

var myObject = {'id': '12345', 'subject': 'programming', 'grade': 'A'};

console.log('Original object:', myObject);

var updatedObject = _.pick(myObject, 'id', 'subject')
console.log('Updated object with pick() : ', updatedObject)
console.log('Original object after update:', myObject);

Ausgabe:

Original object: {id: "12345", subject: "programming", grade: "A"}
Updated object with pick() :  {id: "12345", subject: "programming"}
Original object after update: {id: "12345", subject: "programming", grade: "A"}

Wir können die Bibliothek von hier importieren.

Verwenden der spread-Syntax zum Entfernen einer Eigenschaft aus einem Objekt in JavaScript ECMAScript 6

Die JavaScript-Syntax spread in ECMAScript 6 bietet eine sehr elegante Möglichkeit, die angegebenen Eigenschaften aus einem JavaScript-Objekt zu entfernen, ohne das ursprüngliche Objekt zu verändern, sondern das neu aktualisierte Objekt zurückzugeben.

Wenn wir die spread-Syntax verwenden, sieht es so aus, als würden wir das ursprüngliche Objekt in zwei Variablen aufteilen. Eine davon wird die entfernte Eigenschaft sein. Die andere Variable wird eine Kopie des Originalobjekts ohne das entfernte Objekt enthalten.

var myObject = {'id': '12345', 'subject': 'programming', 'grade': 'A'};

console.log('Original object:', myObject);

var {grade, ...myUpdatedObject} = myObject;

console.log('The removed \'grade\' property : ', grade)
console.log('Updated object : ', myUpdatedObject)
console.log('Original object after update:', myObject);

Ausgabe:

Original object: {id: "12345", subject: "programming", grade: "A"}
The removed 'grade' property :  A
Updated object :  {id: "12345", subject: "programming"}
Original object after update: {id: "12345", subject: "programming", grade: "A"}