Copia Profunda de un Objeto en JavaScript usandostructuredClone

Feb 21 2023
Si estás aquí, apuesto a que has estado usando JSON.parse() + JSON.
Foto de Daniel K Cheung en Unsplash

Si estás aquí, apuesto a que has estado usando JSON.parse()+ JSON.stringify()truco cientos de veces para crear una copia profunda de un objeto en JavaScript. Ya no necesitas eso, el nativo structuredClone()está aquí para ayudarte.

Copia superficial frente a copia profunda

En primer lugar, recordemos cuál es la diferencia entre una copia superficial y una copia profunda:

  • Copia superficial: significa que solo se copia el primer nivel del objeto . Se hace referencia a niveles más profundos. Puede lograr esto en JavaScript usando el operador Spread ( …) o usando Object.assign().
  • Copia profunda: significa que se copian todos los niveles del objeto . Esta es una copia fiel del objeto. Puedes hacer esto usando JSON.parse()+ JSON.stringify(), y ahora también puedes hacerlo con el nativo structuredClone().

Copia profunda con clon estructurado

El método global structuredClone()crea una copia profunda de un valor dado utilizando el algoritmo de clonación estructurada .

Como puedes ver en este fragmento de código:

  • Después de actualizar una propiedad en el primer nivel de los objetos clonados, la propiedad original no se actualiza .
  • Después de actualizar una propiedad en un nivel más profundo, la propiedad original tampoco se actualiza . Esto sucede porque, en este caso, también se copian niveles más profundos.

¡Feliz codificación!