hacer una copia superficial de una matriz u objeto significa crear nuevas referencias a los valores primitivos dentro del objeto, copiándolos.

eso significa que los cambios en la matriz original no afectarán a la matriz copiada, que es lo que sucedería si solo se hubiera copiado la referencia a la matriz (como ocurriría con el operador de asignación =).

una copia superficial se refiere al hecho de que solo se copia un nivel, y que funcionará bien para una matriz u objeto que contenga solo valores primitivos.,

para los objetos y matrices que contienen otros objetos o matrices, copiar estos objetos requiere una copia profunda. De lo contrario, los cambios realizados en las referencias anidadas cambiarán los datos anidados en el objeto o matriz original.

en este artículo, describo 4 métodos para hacer una copia superficial y luego 5 métodos para hacer una copia profunda en JavaScript.,

copia Superficial utilizando …

1. El operador spread (…) es una forma conveniente de hacer una copia superficial de un array u objeto —cuando no hay anidamiento, funciona muy bien.,

como se muestra arriba, el operador spread es útil para crear nuevas instancias de matrices que no se comportan inesperadamente debido a referencias antiguas. Por lo tanto, el operador spread es útil para agregar a una matriz en estado React.

copia Superficial de usar .slice ()

2.,Para las matrices específicamente, el uso de la incorporada en el .slice() método funciona de la misma como la propagación del operador — la creación de una copia superficial de un nivel:

copia Superficial de usar .assign ()

3.,El mismo tipo de copia superficial podría ser creados usando Object.assign(), que puede ser utilizado con cualquier objeto o array:

copia Superficial utilizando matrices Matriz.desde ()

4.,Otro método para copiar una matriz JavaScript es usar Array.from(), que también hará una copia superficial, como se muestra en este ejemplo:

Si un objeto o matriz contiene matrices, copias superficiales funcionarán inesperadamente, porque los objetos anidados no son en realidad clonados.

para objetos anidados profundamente, se necesitará una copia profunda. Explico por qué a continuación.,

Reloj hacia fuera para la anidadas Gotcha!

por otro lado, cuando los objetos JavaScript que incluyen matrices están profundamente anidados, el operador spread solo copia el primer nivel con una nueva referencia, pero los valores más profundos todavía están vinculados entre sí.,

Para resolver este problema requiere la creación de una copia en profundidad, en contraposición a una copia superficial. Se pueden hacer copias profundas usando lodash, rfdc, o el método R. clone() de la biblioteca de programación funcional Ramda. Exploraré copias profundas a continuación.

¿Qué es una copia profunda?,

para los objetos y matrices que contienen otros objetos o matrices, copiar estos objetos requiere una copia profunda. De lo contrario, los cambios realizados en las referencias anidadas cambiarán los datos anidados en el objeto o matriz original.

esto se compara con una copia superficial, que funciona bien para un objeto o matriz que contiene solo valores primitivos, pero fallará para cualquier objeto o matriz que tenga referencias anidadas a otros objetos o matrices., la diferencia entre == y === puede ayudar a ver visualmente la diferencia entre superficial y profunda de copia, como el operador de igualdad estricta (===), muestra que las referencias anidadas son los mismos:

copia Profunda con lodash

1.,La biblioteca lodash es la forma más común en que los desarrolladores de JavaScript hacen una copia profunda. Es sorprendentemente fácil de usar:

Lodash que proviene el nombre de la biblioteca que se hace referencia como un carácter de subrayado (_), un «guión bajo» o lodash para el corto.

copia Profunda con Ramda

2.,La biblioteca de programación funcional Ramda incluye el método R.clone(), que hace una copia profunda de un objeto o matriz.

tenga en cuenta que R.clone() desde Ramda es equivalente a _.cloneDeep() para lodash, como Ramda no tiene una copia superficial método auxiliar.,

copia Profunda con la función personalizada

3. Es bastante fácil escribir una función JavaScript recursiva que hará una copia profunda de objetos anidados o matrices. He aquí un ejemplo:

tenga en cuenta que también tengo que comprobar el valor null ya que el typeof null es «objeto.,»

copia Profunda con JSON.analizar / stringify

4. Si sus datos se ajustan a las especificaciones (consulte a continuación), JSON.parse seguido de JSON.stringify copiará profundamente su objeto.,tipos plex dentro de su objeto, un liner muy simple para clonar profundamente un objeto es: JSON.parse(JSON.stringify(object))» — Dan Dascalescu en su respuesta StackOverflow

para demostrar algunas razones por las que este método no se recomienda generalmente, aquí hay un ejemplo de creación de una copia profunda usando JSON.parse(JSON.stringify(object)):

una función personalizada o las bibliotecas mencionadas pueden hacer una copia profunda sin necesidad de preocuparse por el tipo de contenido, aunque las referencias circulares los dispararán a todos.,

Next I discuss a blazing-fast library called rfdc that can handle circular references while being as fast as a custom deep copy function.

Really fast deep copy? Think rfdc

5.,622333″>