Remover Propriedade de Objecto em JavaScript

Este tutorial irá explicar como podemos remover uma propriedade de um objecto em JavaScript com múltiplos métodos. Demonstraremos utilizando o operador delete, o mecanismo reassignment, a biblioteca underscore, e a sintaxe spread no ECMAScript 6.

Utilizar o operador delete para remover uma propriedade de um objecto em JavaScript

Um método para remover qualquer uma das propriedades de qualquer objecto é o operador de delete. Este operador retira a propriedade do objecto. Por exemplo, temos um objecto myObject com as propriedades como id, subject e grade, e precisamos de remover a propriedade 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)

Resultado:

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

Utilize underscore Library para remover uma propriedade de um objecto em JavaScript

Uma das bibliotecas que pode ajudar a remover uma propriedade de um objecto em JavaScript, mas sem actualizar o objecto original, é a biblioteca underscore. Essa biblioteca fornece duas importantes funções _.pick() e _.omit().

A função _.omit() poderia remover a propriedade dada do objecto e devolver uma cópia actualizada.

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

Resultado:

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

A função _.pick() inclui apenas as propriedades dadas ao objecto e negligencia todas as outras propriedades, e devolve uma cópia actualizada a partir desse objecto.

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

Resultado:

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

Podemos importar a biblioteca a partir de aqui.

Utilize a sintaxe spread para remover uma propriedade de um objecto em JavaScript ECMAScript 6

A sintaxe JavaScript spread no ECMAScript 6 proporciona uma forma muito elegante de remover as propriedades dadas do objecto JavaScript sem alterar o objecto original mas devolver o objecto recentemente actualizado.

Quando utilizamos a sintaxe spread, parecerá que estamos a separar o objecto original em duas variáveis. Uma delas será a propriedade removida. A outra variável conterá uma cópia do objecto original sem o objecto removido.

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

Resultado:

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