Rimuovi proprietà dall'oggetto in JavaScript

Moataz Farid 12 ottobre 2023
  1. Usa l’operatore delete per rimuovere una proprietà da un oggetto in JavaScript
  2. Usa la libreria underscore per rimuovere una proprietà da un oggetto in JavaScript
  3. Usa la sintassi spread per rimuovere una proprietà da un oggetto in JavaScript ECMAScript 6
Rimuovi proprietà dall'oggetto in JavaScript

Questo tutorial spiegherà come rimuovere una proprietà da un oggetto in JavaScript con più metodi. Dimostreremo l’uso dell’operatore delete, il meccanismo di reassignment, la libreria underscore e la sintassi spread in ECMAScript 6.

Usa l’operatore delete per rimuovere una proprietà da un oggetto in JavaScript

Un metodo per rimuovere una qualsiasi delle proprietà di qualsiasi oggetto è l’operatore delete. Questo operatore rimuove la proprietà dall’oggetto. Ad esempio, abbiamo un oggetto myObject con le proprietà id, subject e grade e dobbiamo rimuovere la proprietà 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)

Produzione:

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

Usa la libreria underscore per rimuovere una proprietà da un oggetto in JavaScript

Una delle librerie che può aiutare a rimuovere una proprietà da un oggetto in JavaScript ma senza aggiornare l’oggetto originale è la libreria underscore. Quella libreria fornisce due importanti funzioni _.pick() e _.omit().

La funzione _.omit() potrebbe rimuovere la proprietà data dall’oggetto e restituire una copia aggiornata.

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

Produzione:

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 funzione _.pick() include solo le proprietà date dell’oggetto e trascura tutte le altre proprietà, e restituisce una copia aggiornata da quell’oggetto.

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

Produzione:

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

Possiamo importare la libreria da qui.

Usa la sintassi spread per rimuovere una proprietà da un oggetto in JavaScript ECMAScript 6

La sintassi JavaScript spread in ECMAScript 6 fornisce un modo molto elegante per rimuovere le proprietà date dall’oggetto JavaScript senza modificare l’oggetto originale ma restituire l’oggetto appena aggiornato.

Quando usiamo la sintassi spread, sembrerà come se stessimo separando l’oggetto originale in due variabili. Uno di questi sarà la proprietà rimossa. L’altra variabile manterrà una copia dell’oggetto originale senza quell’oggetto rimosso.

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

Produzione:

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

Articolo correlato - JavaScript Object