Supprimer les biens d'un objet en JavaScript

1. Utiliser l’opérateur delete pour supprimer une propriété d’un objet en JavaScript
2. Utiliser la bibliothèque underscore pour supprimer une propriété d’un objet en JavaScript
3. Utiliser la syntaxe spread pour supprimer une propriété d’un objet en JavaScript ECMAScript 6

Ce tutoriel explique comment on peut supprimer une propriété d’un objet en JavaScript avec plusieurs méthodes. Nous ferons une démonstration en utilisant l’opérateur delete, le mécanisme de réaffectation, la bibliothèque underscore et la syntaxe spread dans ECMAScript 6.

Utiliser l’opérateur delete pour supprimer une propriété d’un objet en JavaScript

Une méthode pour supprimer une des propriétés d’un objet est l’opérateur delete. Cet opérateur supprime la propriété de l’objet. Par exemple, nous avons un objet myObject avec les propriétés id, subject et grade, et nous devons supprimer la propriété grade.

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)

Production :

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

Utiliser la bibliothèque underscore pour supprimer une propriété d’un objet en JavaScript

Une des bibliothèques qui peut aider à supprimer une propriété d’un objet en JavaScript mais sans mettre à jour l’objet original est la underscore library. Cette bibliothèque fournit deux fonctions importantes : _.pick() et _.omit().

La fonction _.omit() peut supprimer la propriété donnée de l’objet et renvoyer une copie mise à jour.

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);

Production :

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"}

La fonction _.pick() n’inclut que les propriétés données de l’objet et néglige toutes les autres propriétés, et retourne une copie mise à jour de cet objet.

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);

Production :

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"}

Nous pouvons importer la bibliothèque à partir de ici.

Utiliser la syntaxe spread pour supprimer une propriété d’un objet en JavaScript ECMAScript 6

La syntaxe JavaScript spread de l’ECMAScript 6 offre un moyen très élégant de supprimer les propriétés données d’un objet JavaScript sans modifier l’objet original mais en renvoyant l’objet nouvellement mis à jour.

Lorsque nous utilisons la syntaxe spread, il semblera que nous séparons l’objet original en deux variables. L’une d’entre elles sera la propriété supprimée. L’autre variable contiendra une copie de l’objet original sans cet objet supprimé.

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);

Production :

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"}