Copia poco profunda frente a la copia profunda en JavaScript

La tarea de copia en JavaScript es bastante sencilla para los tipos de datos primitivos. Sin embargo, debe elegir cuidadosamente entre el Copia superficial y profunda técnicas mientras manejan objetos y referencias.

En direcciones de referencia de solo copia superficial se copian; Por lo tanto, alterar un objeto también aplicará los mismos cambios a otro objeto. Para evitar tal situación, puede utilizar el procedimiento de copia profunda.

Esta publicación explicará el concepto de copia superficial y copia profunda utilizando ejemplos apropiados. Entonces, comencemos!

Copia superficial en JavaScript

Un mecanismo en el que un objeto se copia bits a un objeto especificado se conoce como copia superficial.

• El método de copia poco profunda pega una copia exacta de un objeto en particular en otro objeto.
• Se utiliza principalmente para copiar elementos de matriz unidimensional, donde solo copia los elementos presentes en el primer nivel.
• Solo copia las direcciones de referencia a otro objeto.

Métodos para copiar un objeto en JavaScript

Para copiar un objeto JavaScript en otro objeto, puede usar los siguientes métodos:

• Objeto.Método asignar ()
• Operador de propagación […]
• Operador de asignación "="

Nota: Si utiliza el "Operador de propagación" o "objeto.asignar()" Método, luego, después de la copia superficial, el objeto copiado se desconecta del objeto original, mientras que, en el caso de usar el "asignación"El operador, alterar el objeto copiado también modificará el objeto original.

Discutiremos brevemente cada uno de los métodos mencionados para copiar un objeto en JavaScript.

Copia poco profunda de un objeto en JavaScript utilizando el operador spread

El "desparramar"El operador se puede utilizar para copiar un objeto superficial. Está representado como tres puntos consecutivos "...".

Sintaxis del uso del operador spread para copiar un objeto en JavaScript

deje object2 = ... object1;

Aquí, el operador de propagación copiará el par de valores clave de "Object1" a "Object2".

Ejemplo: Copia superficial Un objeto en JavaScript utilizando el operador spread

En primer lugar, crearemos un objeto llamado "empleado"Tener dos pares de valor clave:

Const Empleado =
Nombre: 'Alex',
Designación: 'Gerente'
;

Entonces, copiaremos superficial el "empleado"OBJETO AL REMISO CREADO"EMP1"Objeto usando el operador de propagación:

Deje emp1 = ... empleado;

Además, puede verificar si modifica los valores de propiedad del "EMP1"El objeto también puede afectar el"empleado"Propiedad de nombre del objeto:

EMP1.nombre = 'max';

consola.Log ("EMP1 Nombre:" + EMP1.nombre);

consola.Log ("Nombre del empleado": + Empleado.nombre); [/cc]

Hemos copiado con éxito el "empleado"Objeto al"EMP1"Objeto y modificando el"EMP1.nombre"El valor de la propiedad no ha aplicado ningún cambio al"empleado.nombre" propiedad:

Copia superficial en JavaScript usando objeto.Método asignar ()

El javascript "Objeto.asignar()"El método se utiliza para copiar superficial el"valor clave"Par de un objeto ya creado en otro objeto. El objeto original no se verá afectado al utilizar el objeto.Método asignar ().

Sintaxis de usar objeto.asignar () método a copia poco profunda en JavaScript

Objeto.Asignar (objetivo, fuente)

Aquí, "objetivo"Representa el objeto JavaScript cuyo par de valores clave se copiará y"fuente"Indica el objeto donde se colocará el par de valores clave copiado.

Ejemplo: copia superficial en JavaScript usando objeto.Método asignar ()

Invocaremos el "Objeto.asignar()"Método para copiar superficial "Empleado" objeto a "EMP1":

Deje emp1 = ; objeto.asignar (emp1, empleado);

El "Objeto.asignar()El método "devolverá el objeto de destino, que es"EMP1" en nuestro caso:

A continuación, actualizaremos el "Embem.nombre" El valor de la propiedad:

EMP1.nombre = 'Stepheny'; Consola.log ("EMP1 Nombre:" + EMP1.nombre);
consola.Log ("Empleado.Nombre: " + Empleado.nombre);

Como puede ver en la salida dada a continuación, alterando el "Embem.nombre"El valor de la propiedad no ha modificado el"empleado" objeto.

Copia poco profunda en JavaScript usando el operador de asignación

El operador de asignación "="También puede ayudar a copiar un objeto superficial en JavaScript. En el caso de usar el operador de asignación, ambas variables se referirán al mismo objeto. Los cambios en un objeto también afectarán el valor de propiedad del objeto correspondiente:

Sintaxis del uso del operador de asignación a una copia superficial en JavaScript

Object2 = Object1

Aquí, el operador de asignación copia el "Object1" a "Object2".

Ejemplo: copia superficial en JavaScript usando el operador de asignación

Ahora, utilizaremos el operador de asignación de JavaScript para copiar superficie el "Empleado" objeto a "EMP1":

Let EMP1 = ; EMP1 = Empleado;

En el siguiente paso, especificaremos "Stepheny"Como el valor de"EMP1.nombre" propiedad:

EMP1.nombre = 'Stepheny'; Consola.log ("EMP1 Nombre:" + EMP1.nombre);
consola.Log ("Empleado.Nombre: " + Empleado.nombre);

La salida dada significa que cambiar el "Embem.nombre"El valor de la propiedad no ha modificado el Objeto "Empleado" "Nombre" propiedad:

Ahora, discutiremos el concepto de copia profunda de un objeto en JavaScript.

Copia profunda en JavaScript

"Copia profunda"¿Es un procedimiento recursivo para copiar objeto. Este mecanismo crea un nuevo objeto y luego clama el par de valores clave especificado para él. Esta declaración significa que, mientras copia profunda, un objeto JavaScript está completamente clonado en otro objeto. Después de eso, el objeto copiado se desconecta del objeto original.

Métodos para copiar profundamente un objeto en JavaScript

Los métodos utilizados para copiar profundamente un objeto JavaScript son Json.stringify () y json.analizar gramaticalmente(), donde el método Stringify () convierte un objeto JavaScript particular en una cadena, y luego el método parse () realiza la operación de análisis y devuelve un objeto.

Sintaxis del uso de JSON.stringify () y json.Métodos de parse () para copiar un objeto en JavaScript

Dejar object2 = json.analizar.Stringify (objeto1));

Aquí el Stringify () Method convierte JavaScript "objeto1"A una cadena, y luego el método de parse () realiza la operación de análisis y devoluciones que se almacenarán en" "objeto2".

Ejemplo: Copia profunda en JavaScript Un objeto en JavaScript usando JSON.stringify () y json.métodos de parse ()

En este ejemplo, hemos usado el métodos stringify () y parse () copiar "Empleado" al "EMP1" objeto. El "Json.Stringify ()"El método convertirá el"empleado"Objeto en un"cadena"Y luego el"Json.analizar gramaticalmente()"El método analiza la cadena resultante y devuelve un objeto JavaScript:

Dejar empleado =
Nombre: 'Alex',
Dirección: Ciudad: 'Ankara', País: 'Turquía'
;
var emp1 = json.analizar.stringify (empleado));
consola.log (emp1);

La salida dada significa que hemos copiado con éxito el "Empleado" objeto a "EMP1":

Por último, modificaremos algunas propiedades del objeto "EMP1" y luego verificaremos el resultado:

EMP1.nombre = 'max';
EMP1.DIRECCIÓN.ciudad = 'iestanbul';
consola.log ("EMP1.Nombre: " + Emp1.nombre);
consola.log ("EMP1.DIRECCIÓN.Ciudad: " + Emp1.DIRECCIÓN.ciudad);
consola.Log ("Empleado.Nombre: " + Empleado.nombre);
consola.Log ("Empleado.DIRECCIÓN.Ciudad: " + Empleado.DIRECCIÓN.ciudad);

Después de realizar la operación de copia profunda, el "EMP1"Se desconecta del"empleado,"Entonces, cualquier cambio realizado en el"EMP1"No afectará el"empleado" objeto:

Hemos compilado toda la información esencial relacionada con la copia superficial y los objetos de copia profunda en JavaScript. Puede explorarlo más de acuerdo con sus requisitos.

Conclusión

Difundir el operador "[...]", "Objeto.asignación () "y operador de" asignación " son métodos que le permiten Objetos de copia poco profunda y para copiar un objeto JavaScript, JSON.stringify () y json.métodos de parse () se usan, donde el json.El método Stringify () convierte un objeto particular en una cadena, que luego se analiza con JSON.método parse (). Esta publicación explicó el concepto de copia superficial y profunda utilizando ejemplos apropiados.