Cómo clonar los objetos en JavaScript

JavaScript se basa completamente en objetos, todo en JavaScript es un objeto. Las matrices son objetos, las cadenas son objetos y los objetos son objetos. Cuando trabaja con objetos o matrices, a veces se necesita copiar o clonar una matriz u objeto.

Hay dos tipos de clones de objetos \ matrices, uno de ellos siendo clones poco profundos y el otro es clones.

Crear clones En Vanilla JavaScript, necesitamos usar un combinación de JSON PARSE () función y Json stringify () función. En esta publicación, vamos a discutir qué son clones superficiales y clones profundos, cómo hacer clones en JavaScript y cómo hacer clones profundos.

Clones poco profundos vs clones profundos

Cada vez que una matriz \ objeto que contiene otra matriz \ objeto dentro se copia de una variable a otra variable, los elementos de esa matriz \ objeto no se copian; Más bien, se copia un puntero de referencia a la nueva variable que apunta a la antigua variable. Tales copias se conocen como copias superficiales o clones poco profundos

Mientras que, cuando los elementos de una matriz \ objeto se copian directamente (no su puntero de referencia) a una nueva variable junto con la matriz anidada \ objeto, entonces esa copia se conoce como clones o copias profundas.

Explicación con el código JavaScript

Estos son conceptos avanzados de JavaScript, por eso usaremos ejemplos de codificación para demostrar la diferencia entre la clonación superficial y la clonación profunda. Para comenzar, cree una matriz que contenga varios elementos utilizando la siguiente línea de código:

var originalArray = [verdadero, falso, 2, "google", indefinido];

Ahora, hay dos formas de clonar esta matriz:

• Mediante el uso del método Slice
• Mediante el uso del operador de propagación

Para crear un clon utilizando el método Slice, use la siguiente línea:

var clone1 = OriginalArray.rebanada (0);

Y para crear un clon utilizando el operador spread use la siguiente línea:

var clone2 = [... originalArray];

Para probar si nuestros elementos fueron copiados o no, podemos usar la función de registro de consola para imprimir la matriz original, así como nuestros dos clones:

consola.log (originalArray);
consola.log (clone1);
consola.log (clone2);

Obtenemos la siguiente salida en nuestra consola:

Para demostrar que estos son clones reales, y no referencias de la matriz original pasadas dentro de estas variables, hagamos algunos cambios en los clones y verifique si estos cambios afectan la matriz original o no.

Clone1 [0] = 1;
clone2 [1] = "hola";

Imprima todas las matrices en la consola una vez más para examinar los cambios con las siguientes líneas:

consola.log (originalArray);
consola.log (clone1);
consola.log (clone2);

Observará la siguiente salida:

Como puede ver, los cambios en las matrices de clon no afectaron la matriz original, lo que significa que otras matrices no copiaron la referencia de la matriz original.

Verificación de clones poco profundos

Hemos visto cómo clonar matrices simples, pero ¿qué pasa si tenemos una matriz u objeto que contiene otra matriz dentro de ella? Considere la siguiente matriz:

var originalArray = [["Google"]];

Como puede ver, tenemos una matriz dentro de otra matriz, intentemos hacer un clon de esta matriz utilizando el método Slice que ya hemos usado en el ejemplo anterior:

var clone = originalarray.rebanada (0);

Hemos hecho un clon de esta matriz en la variable "clon", Imprima ambas matrices utilizando la función de registro de la consola:

consola.log (originalArray [0]);
consola.log (clon [0]);

Debería ver el siguiente resultado en la consola de su pantalla:

Intentemos hacer algunos cambios en la matriz clonada con la siguiente línea de código:

clon [0].push ("mapas");

Esto debería hacer cambios solo en el "clon" matriz y no en la matriz original, pero aquí es donde las cosas se ponen interesantes. Imprima ambas matrices utilizando la función de registro de la consola:

consola.log (originalArray [0]);
consola.log (clon [0]);

Debería ver el siguiente resultado en su consola:

Puede observar fácilmente la imagen de arriba que los cambios en la matriz clonada causaron cambios en la matriz original. Esto significa que si nuestro objeto \ matriz contiene objeto \ matrices, la clonación pasa referencia a los objetos anidados creando así un clon poco profundo.

Clonación profunda en vainilla javascript

Uf ... eso fue muchas cosas solo para explicar un concepto de clones poco profundos Pero, de nuevo, estos son conceptos de nivel avanzado. Para hacer clones profundos utilizando múltiples métodos de JavaScript, pero la mayoría de ellos requieren NodeJs. Para hacer clones profundos en Vanilla JavaScript, debe usar una combinación de la función JSON parse () y la función JSON Stringify (). Cree una matriz con una matriz anidada dentro de él con la siguiente línea de código:

var originalArray = [["Google"]];

Use una combinación de JSON Parse y JSON Stringify () con la siguiente línea:

var profundoClone = json.analizar.Stringify (originalArray));

Ahora, que hemos hecho nuestro clon, debemos verificarlo imprimiendo en la consola utilizando la función de registro de la consola:

consola.log (clon [0]);

Obtendrá el siguiente resultado en la consola:

Ahora, intentemos cambiar los elementos de la matriz clonada usando la siguiente línea:

DeepClone [0].push ("mapas");

Lo último que queda es observar ambas matrices en la consola para determinar si cambiar la matriz clonada cambió la matriz original o no:

consola.log (originalArray [0]);
consola.log (DeepClone [0]);

Obtendrá el siguiente resultado en su consola:

En la imagen de arriba, puede observar que los cambios en el clonado la matriz no causó ningún cambio en la matriz original. Esto significa que las matrices anidadas \ objetos también se copiaron en lugar de que su referencia se pase a la nueva variable, y es por eso que tales clones se llaman el clones.

Conclusión

Los clones profundos en Vanilla JavaScript se realizan utilizando una combinación de función JSON parse () y función JSON Stringify () al analizar un objeto \ Array en una nueva variable. Todo en JavaScript es un objeto, y cuando intentamos copiar objetos anidados, su referencia al puntero se copia a la nueva variable en lugar de copiar los elementos de las matrices anidadas \ Objetos. Cuando la referencia de un objeto se pasa a un nuevo cambio de objeto en el nuevo objeto, causa cambios en el objeto anterior, lo que no es muy eficiente. Esta es la razón por la cual JavaScript agregó una forma de crear clones profundos.