Matriz de copia profunda en JavaScript

1. Introducción a la copia superficial y la copia profunda en JavaScript
2. Use el método structuredClone() para crear una copia profunda de un objeto en JavaScript
3. Utilice los métodos JSON.parse() y JSON.stringify() para crear una copia profunda de un objeto en JavaScript
4. Use la biblioteca Lodash para crear una copia profunda de un objeto en JavaScript

En este artículo, aprenderá el concepto de copia profunda y superficial. El artículo también presentará formas de realizar una copia profunda en matrices en JavaScript.

Introducción a la copia superficial y la copia profunda en JavaScript

En JavaScript, un objeto se puede copiar de dos maneras. Son copia profunda y copia superficial.

En primer lugar, analicemos la copia superficial. Una copia superficial de un objeto tiene propiedades que apuntan a la misma referencia que las propiedades del objeto de origen.

Aquí, el objeto de origen es el objeto a partir del cual se realiza la copia. Dado que el objeto y su copia superficial comparten las mismas referencias, el cambio realizado en uno de ellos se reflejará en el otro objeto.

Entendámoslo con un ejemplo.

Considere un objeto estudiante1 con la propiedad denominada nombre y el valor kevin. A continuación, cree otra variable, estudiante2, y asígnele el valor de estudiante2.

let student1 = {name: 'kevin'}

let student2 = student1

Aquí, acabamos de hacer una copia superficial del objeto estudiante1. Ahora, intentemos cambiar el valor de la propiedad nombre a otra cosa del objeto estudiante2.

Por ejemplo, el nuevo valor es juan. Cuando imprimimos ambos objetos estudiante1 y estudiante2, el valor es el mismo: juan.

Código de ejemplo:

let student1 = {name: 'kevin'}

let student2 = student1

 student2.name = "john"

console.log(student1)
console.log(student2)

Producción :

{
  name: "john"
}
{
  name: "john"
}

Así es como se comporta una copia superficial de un objeto. Puede cambiar las propiedades del objeto de origen ya que ambos objetos comparten las mismas referencias.

Sin embargo, la copia profunda de un objeto actúa todo lo contrario. Como la copia y el objeto de origen no apuntan a la misma referencia, cambiar una de las propiedades del objeto no cambia las demás.

En las secciones a continuación, aprenderá sobre la copia profunda y las formas de lograrlo en JavaScript.

Use el método structuredClone() para crear una copia profunda de un objeto en JavaScript

Una de las formas de crear una copia profunda de un objeto en JavaScript es usando el método structuredClone(). El método utiliza un algoritmo de clonación estructurada que realiza una clonación profunda de un objeto.

El método toma el objeto que se va a clonar como parámetro. Realicemos la clonación.

Por ejemplo, considere el objeto estudiante1 anterior que contiene el valor kevin para la propiedad nombre. A continuación, utilice el método structuredClone() y suministre el objeto student1 como su parámetro.

Finalmente, asigne el método a una variable estudiante2. Esto hace que el objeto estudiante2 sea una copia profunda del objeto estudiante1.

A continuación, cambie la propiedad del objeto student2 a john.

Esta vez, cuando imprime ambos objetos, no tienen los mismos valores para las propiedades. El objeto estudiante1 tendrá el valor kevin, y estudiante2 tendrá john para la propiedad nombre.

Código de ejemplo:

let student1 = {
  name: 'kevin',

}

let student2 = structuredClone(student1)

student2.name = 'john'

console.log(student1)
console.log(student2)

Producción :

{
  name: "kevin"
}
{
  name: "john"
}

Así es como podemos usar el método structuredClone() para realizar la copia profunda en JavaScript.

Utilice los métodos JSON.parse() y JSON.stringify() para crear una copia profunda de un objeto en JavaScript

También podemos crear una copia profunda de un objeto utilizando los métodos JSON.parse() y JSON.stringify(). El método JSON.stringify() convierte el objeto o un valor en una cadena, mientras que el método JSON.parse() crea un objeto o un valor analizando la cadena JSON.

Primero, podemos convertir el objeto en una cadena usando el método JSON.stringify(), y luego podemos usar el método JSON.parse() para crear una copia profunda del objeto analizándolo.

Por ejemplo, considere el mismo objeto student1 y use el método JSON.stringify() para convertir el objeto en una cadena. Luego, usa el método JSON.parse() en el resultado.

Asigne la expresión a una variable alumno2. A continuación, cambie la propiedad del primer objeto como hicimos anteriormente e imprima ambos objetos.

Código de ejemplo:

let student1 = {
  name: 'kevin',

}


let student2 = JSON.parse(JSON.stringify(student1))

student2.name = 'john'

console.log(student1)
console.log(student2)

Producción :

{
  name: "kevin"
}
{
  name: "john"
}

Podemos ver que los valores de las propiedades de estos dos objetos son diferentes, lo que significa que creamos una copia profunda del objeto de origen. Así, podemos utilizar los métodos JSON.parse() y JSON.stringify() para realizar la copia profunda de un objeto en JavaScript.

Pero, tendremos un problema al trabajar con funciones y objetos. Implementemos el clon profundo de un objeto que contiene una función y un objeto Date() para ver una imagen más clara del problema.

Agregue los nuevos campos al objeto estudiante1 como en el ejemplo a continuación.

Código de ejemplo:

let student1 = {
  name: 'kevin',
  age: function() {
    return 24;
  },
  enrolledDate: new Date()

}

A continuación, cree una copia profunda del objeto como se indica arriba utilizando las funciones JSON.parse() junto con las funciones JSON.stringify(). Luego, cambie la propiedad nombre del primer objeto. Finalmente, imprima ambos objetos.

Código de ejemplo:

let student2 = JSON.parse(JSON.stringify(student1))
student2.name = 'john'

console.log(student1)
console.log(student2)

Producción :

{
  name: 'kevin',
  age: [Function: age],
  enrolledDate: 2023-01-19T16:15:30.914Z
}
{ name: 'john', enrolledDate: '2023-01-19T16:15:30.914Z' }

Aquí, podemos ver algunos problemas notables en la copia profunda del objeto. El primer problema es que a la función le falta el objeto clonado.

El otro problema es el cambio en el tipo del objeto anidado nueva Fecha(). Después de la clonación, el objeto new Date() se cambia a un tipo String. Puede notar las comillas alrededor de la fecha.

Así, descubrimos un problema durante la copia profunda de un objeto que contiene una función y un tipo al usar los métodos JSON.parse() y JSON.stringify(). Resolveremos el problema en la siguiente sección del artículo.

Use la biblioteca Lodash para crear una copia profunda de un objeto en JavaScript

Podemos solucionar el problema al clonar las funciones y los objetos anidados usando la biblioteca lodash. lodash proporciona un método cloneDeep(), que toma el objeto fuente como parámetro y lo clona en profundidad.

Puede instalar la biblioteca con el siguiente comando.

npm i -g lodash

Por ejemplo, solicite la biblioteca en la parte superior de su código. Asígnalo a una constante _.

Use la constante para invocar el cloneDeep() donde el objeto student1 es el parámetro. Cambie el valor de la propiedad del objeto como antes. Finalmente, imprima ambos objetos.

Código de ejemplo:

const _ = require('lodash')
let student1 = {
  name: 'kevin',
  age: function() {
    return 24;
  },
  enrolledDate: new Date()

}


let student2 = _.cloneDeep(student1)

student2.name = 'john'

console.log(student1)
console.log(student2)

Producción :

{
  name: 'kevin',
  age: [Function: age],
  enrolledDate: 2023-01-23T15:02:56.059Z
}
{
  name: 'john',
  age: [Function: age],
  enrolledDate: 2023-01-23T15:02:56.059Z
}

Finalmente, podemos hacer una clonación profunda del objeto y aún tener las funciones y los objetos anidados. Por lo tanto, podemos usar la biblioteca lodash para crear un clon profundo de un objeto en JavaScript.