Cómo clonar en profundidad una matriz en JavaScript
JavaScript ofrece muchas formas de copiar un objeto, pero no todas proporcionan una copia profunda. Aprenda de la manera más eficiente y descubra también todas las opciones que tiene
Aquí hay 2 formas de clonar en profundidad una matriz. Para una manera rápida y sucia, use los métodos JSON.
Hay 2 tipos de clonación de matrices: superficial y profunda. Las copias superficiales solo cubren el primer nivel de la matriz y se hace referencia al resto. Si desea una copia fiel de las matrices anidadas, necesitará un clon profundo. Para clones profundos, siga el método JSON O mejor aún use Lodash
|_+_|
Las matrices son tipos de referencia
Para entender por qué existen dos tipos de clonación. Profundicemos en los fundamentos y expliquemos qué son los tipos de referencia.
A diferencia de sus tipos primitivos (es decir, número o cadena), las matrices son tipos de referencia. Lo que significa que cuando asigna una matriz a una variable, está asignando una dirección de memoria y no la matriz real en sí. WTH. Sé que esto es un poco confuso. Entonces, expliquemos con un ejemplo.
Copiar un tipo de valor
Así que no hay problema aquí. Estamos creando una copia de const numbers = [1, [2], [3, [4]], 5]; // Using JavaScript JSON.parse(JSON.stringify(numbers)); // Using Lodash _.cloneDeep(objects);
. Y si cambiamos el value
, no afecta al original valueCopy
. Tiene sentido: cuando cambiamos la copia, no debería afectar al original en absoluto. Todo bien aquí
Copiar un tipo de referencia
Bien, las cosas están a punto de ponerse raras ahora. Copiemos nuestra matriz usando el mismo método que usamos para copiar un tipo de valor.
|_+_|¿Por qué la matriz original también se vio afectada? Eso es porque lo que copió no es la matriz en sí, sino el puntero al espacio de memoria que ocupa la matriz. Los tipos de referencia no contienen valores, son un puntero al valor en la memoria.
Solución para copiar tipos de referencia
Entonces, la solución es copiar el valor, NO el puntero. Como esto:
|_+_|Clon superficial vs profundo
Cuando usé spread value
para copiar una matriz, solo estoy creando una copia superficial. Si la matriz está anidada o es multidimensional, no funcionará. Vamos a ver:
Como puede ver, la capa superficial o primera está bien. Sin embargo, una vez que cambiamos el elemento anidado, la matriz original también se vio afectada. Entonces la solución es hacer un clon profundo:
|_+_|Recursos
- Documentos web de MDN: JSON.stringify
- Documentos web de MDN: JSON.parse
- Lodash: cloneDeep
- Desbordamiento de pila: ¿Cómo se clona una matriz de objetos en Javascript?
- Cómo diferenciar entre copias profundas y superficiales en JavaScript
- JS: clon, objeto / matriz de copia profunda
- Copia profunda de JavaScript para matriz y objeto
- Gist: tipos primitivos y tipos de referencia en JavaScript
- Explicando el valor frente a la referencia en Javascript
- Comprensión de la copia profunda y superficial en Javascript
#javascript #arreglos