Este tutorial le mostrará cómo copiar/clonar correctamente una matriz u objeto en JavaScript. ¡No es tan simple como parece!
Copiar una matriz u objeto puede parecer simple, pero JavaScript lanza una llave inglesa en el trabajo:el hecho de que cuando asigna el valor de una variable a otra, referencia la variable original. Esto significa que si se cambia el valor de la variable original, ¡el valor de la copia también cambiará!
Para evitar esto, deberá clonar la matriz:garantizar que se creen nuevas variables con sus propios valores en una nueva matriz. JavaScript no contiene una forma integrada de hacer esto, pero, por supuesto, hay varias formas de lograrlo.
¡Cómo no hacerlo!
Tu primer instinto puede ser hacer lo siguiente:
var pets = ['fish', 'parrot', 'cat']; var petsClone = pets;
¡ESTO NO FUNCIONARÁ!
petsClone simplemente se convertirá en una referencia a la variable mascotas – no una copia. mascotas y petsClone no serán copias el uno del otro, ambos serán nombres que apuntan al mismo variables.
Si uno se actualiza, el otro cambiará, lo que puede no ser el comportamiento que desea si está copiando una matriz.
Copia superficial frente a copia profunda:clonación segura de TODOS los valores en una matriz en JavaScript
Al clonar matrices en JavaScript, verá referencias a superficial y profundo clonación o copia.
Poco profundo la clonación solo clonará los valores en el primer nivel de la matriz. Los valores anidados NO se clonarán, así que ¡cuidado con este si trabajas con matrices multidimensionales! La clonación superficial sigue siendo útil cuando se trabaja con matrices bidimensionales y desea centrarse en el rendimiento y la simplicidad del código.
Matrices de clonación superficial usando la sintaxis extendida de ES6 (...)
Esta es probablemente la forma más sencilla de copiar o clonar superficialmente una matriz, utilizando la sintaxis de distribución de JavaScript:
var pets = ['fish', 'parrot', 'cat']; var petsClone = [...pets];
La sintaxis extendida expande los valores dentro de una matriz, por lo que llamarla dentro de una matriz recién declarada clonará el contenido de la otra matriz en la nueva matriz.
Uso de funciones JSON para clonar en profundidad una matriz
Abajo, un multidimensional o anidado Se declara la matriz. La matriz mascotas contiene dos subarreglos, cada uno con sus propios valores. Intentar usar la sintaxis de propagación anterior no clone los valores en estos subconjuntos, se hará referencia a ellos.
Tú podrías escriba un ciclo complejo para sumergirse en cada subarreglo y clonar los valores, pero hay una solución mucho mejor, aunque un poco complicada:convertir el arreglo original a JSON y luego decodificarlo en un nuevo arreglo.
var pets = [['dog', 'cat'], ['fish', 'frog']]; var petsCopy = JSON.parse(JSON.stringify(pets));
Las soluciones hacky son a menudo las mejores soluciones. JSON.stringify() se utiliza para convertir la matriz original en una cadena JSON y JSON.parse() se utiliza para decodificar esa cadena en una matriz de JavaScript, un clon completamente separado del original, que luego se asigna a una nueva variable.
Cuidado con las clases/objetos personalizados
Si está clonando en profundidad una matriz que contiene clases de objetos personalizados, se convertirán en objetos genéricos y se perderán todas las referencias dentro de ellos.
Si esto es un problema o no, depende completamente de lo que esté tratando de lograr. Es posible que deba recorrer la matriz clonada y usar Object.assign() para asegurarse de que los objetos clonados sean de la clase correcta.
Prueba, prueba, prueba
Si está creando algo de misión crítica, o que trata con dinero (como una tienda en línea), y está duplicando arreglos, ¡asegúrese de probar su código y asegurarse de que su código se comporta de la manera que desea!
El comportamiento de JavaScript de referenciar variables en lugar de duplicarlas es un obstáculo común para los nuevos desarrolladores de JavaScript. Adquirir el hábito de probar su código asegurará que detecte cualquier problema antes se convierten en un problema para sus usuarios.