En este artículo, intentaremos comprender cómo agregar propiedades a un objeto y cómo agregar o eliminar las propiedades de un objeto en JavaScript.
Antes de ir y ver la adición y eliminación de propiedades de un objeto, primero comprendamos los conceptos básicos de un objeto en JavaScript.
Objeto:
- Un objeto en JavaScript es la colección de propiedades.
- Una sola propiedad en un objeto de JavaScript es en realidad la asociación entre el nombre (o clave) y un valor.
- Un objeto puede contener un número diferente de propiedades que además tienen diferentes nombres y valores.
Sintaxis: al usar la siguiente sintaxis, se puede crear fácilmente un objeto con un número diferente de propiedades.
let object_name = { property_name: value, ... }
Ahora que hemos entendido los detalles básicos asociados con el objeto en JavaScript, veamos algunos ejemplos para agregar propiedades en un objeto y cómo eliminar propiedades de un objeto.
Agregar/eliminar propiedades de un objeto:
- Como se muestra en la representación pictórica anterior, podemos agregar o eliminar fácilmente varias propiedades de un objeto en JavaScript siguiendo ciertos métodos o técnicas.
- Para agregar cualquier propiedad, se podría usar nombre_objeto.nombre_propiedad = valor (o) nombre_objeto[“nombre_propiedad”] = valor .
- Para eliminar cualquier propiedad, se podría usar fácilmente delete object_name.property_name ( o) delete object_name[“property_name”] .
Veamos algunos ejemplos para comprender mejor cómo agregar y quitar propiedades de un objeto.
Ejemplo 1: En este ejemplo, primero creamos un objeto y luego le agregaremos algunas propiedades.
Javascript
<script> let object = { name: "ABC", email: "xyz@abc.com" }; console.log(object); // Adding some properties into the // above created object... object.age = 10; object.contact = 123467890; object.place = "Earth"; object["country"]= "India"; console.log(object); </script>
Producción:
{ name: 'ABC', email: 'xyz@abc.com' } { name: 'ABC', email: 'xyz@abc.com', age: 10, contact: 123467890, place: 'Earth', country: 'India' }
Ejemplo 2: En este ejemplo, primero crearemos un objeto y luego eliminaremos algunas propiedades.
Javascript
<script> let object = { name: "ABC", email: "xyz@abc.com", age: 10, contact: 1234567890, place: "Earth", country: "India", }; console.log(object); // Removing some properties // from the above created object delete object.age; // age property deletion console.log(object); // country property deletion delete object["country"]; console.log(object); delete object.place; // place property deletion console.log(object); </script>
Producción:
{ name: 'ABC', email: 'xyz@abc.com', age: 10, contact: 1234567890, place: 'Earth', country: 'India' } { name: 'ABC', email: 'xyz@abc.com', contact: 1234567890, place: 'Earth', country: 'India' } { name: 'ABC', email: 'xyz@abc.com', contact: 1234567890, place: 'Earth' } { name: 'ABC', email: 'xyz@abc.com', contact: 1234567890 }
Ejemplo-3:
- En este ejemplo, eliminaremos propiedades del objeto usando otro enfoque.
- Este es el enfoque más nuevo que no altera el objeto original.
- Este enfoque se denomina Destrucción de objetos con el uso de parámetros de descanso.
Javascript
let person_data = { first_name: "ABC", last_name: "DEF", age: 20, eye_color: "brown", place: "XYZ", }; let { eye_color, ...remainingObject } = person_data; console.log("Original Object..."); console.log(person_data); console.log("Remaining Object....."); console.log(remainingObject); //Another way of Object Destructuing Approach Implementation...... let property_name = "place"; let { [property_name]: removedProperty, ...restObject } = person_data; console.log("Remaining Object"); console.log(restObject); //Another way of Object Destructuing Approach Implementation...... let { place, age, ...leftObject } = person_data; console.log("Remaining Object"); console.log(leftObject); // This code is contributed by Aman Singla....
Producción:
Original Object... { first_name: 'ABC', last_name: 'DEF', age: 20, eye_color: 'brown', place: 'XYZ' } Remaining Object..... { first_name: 'ABC', last_name: 'DEF', age: 20, place: 'XYZ' } Remaining Object { first_name: 'ABC', last_name: 'DEF', age: 20, eye_color: 'brown' } Remaining Object { first_name: 'ABC', last_name: 'DEF', eye_color: 'brown' }
Publicación traducida automáticamente
Artículo escrito por amansingla y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA