En este ejemplo, aprenderá a escribir un programa que clona un objeto.
Para comprender este ejemplo, debe tener el conocimiento de los siguientes temas de programación de JavaScript:
- Objetos JavaScript
- JavaScript Object.assign ()
Un objeto JavaScript es un tipo de datos complejo que puede contener varios tipos de datos. Por ejemplo,
const person = ( name: 'John', age: 21, )
Aquí personhay un objeto. Ahora, no puede clonar un objeto haciendo algo como esto.
const copy = person; console.log(copy); // (name: "John", age: 21)
En el programa anterior, la copyvariable tiene el mismo valor que el personobjeto. Sin embargo, si cambia el valor del copyobjeto, el valor en el personobjeto también cambiará. Por ejemplo,
copy.name = 'Peter'; console.log(copy.name); // Peter console.log(person.name); // Peter
El cambio se ve en ambos objetos porque los objetos son tipos de referencia . Y ambos copyy personapuntan al mismo objeto.
Ejemplo 1. Clonar el objeto usando Object.assign ()
// program to clone the object // declaring object const person = ( name: 'John', age: 21, ) // cloning the object const clonePerson = Object.assign((), person); console.log(clonePerson); // changing the value of clonePerson clonePerson.name = 'Peter'; console.log(clonePerson.name); console.log(person.name);
Salida
(nombre: "John", edad: 21) Peter John
El Object.assign()método es parte del estándar ES6 . El Object.assign()método realiza una copia profunda y copia todas las propiedades de uno o más objetos.
Nota : El vacío ()como primer argumento asegura que no cambie el objeto original.
Ejemplo 2: Clonar el objeto usando la sintaxis de propagación
// program to clone the object // declaring object const person = ( name: 'John', age: 21, ) // cloning the object const clonePerson = (… person) console.log(clonePerson); // changing the value of clonePerson clonePerson.name = 'Peter'; console.log(clonePerson.name); console.log(person.name);
Salida
(nombre: "John", edad: 21) Peter John
La sintaxis de propagación … se introdujo en la versión posterior (ES6).
La sintaxis de propagación se puede utilizar para hacer una copia superficial de un objeto. Esto significa que copiará el objeto. Sin embargo, se hace referencia a los objetos más profundos. Por ejemplo,
const person = ( name: 'John', age: 21, // the inner objects will change in the shallow copy marks: ( math: 66, english: 73) ) // cloning the object const clonePerson = (… person) console.log(clonePerson); // (name: "John", age: 21, marks: (… )) // changing the value of clonePerson clonePerson.marks.math = 100; console.log(clonePerson.marks.math); // 100 console.log(person.marks.math); // 100
Aquí, cuando el valor del objeto interno mathse cambia a 100 de clonePersonobjeto, el valor de la mathclave del personobjeto también cambia.
Ejemplo 3: Clonar el objeto usando JSON.parse ()
// program to clone the object // declaring object const person = ( name: 'John', age: 21, ) // cloning the object const clonePerson = JSON.parse(JSON.stringify(person)); console.log(clonePerson); // changing the value of clonePerson clonePerson.name = 'Peter'; console.log(clonePerson.name); console.log(person.name);
Salida
(nombre: "John", edad: 21) Peter John
En el programa anterior, el JSON.parse()método se usa para clonar un objeto.
Nota : JSON.parse()sólo funciona con Numbery Stringliteral objeto. No funciona con un objeto literal con propiedades functiono symbol.
