Estoy estudiando JavaScript sobre asignación y clonación de matrices. Intenté usar el operador de propagación "..." para clonar los elementos de la matriz A en la matriz B. Sin embargo, ¿por qué el elemento de la matriz A también cambia cuando modifico los elementos de B?
Por ejemplo :
A = [{id:1, value:3},{id:2, value:1}]; B = [...A]; B[0].value = 4; console.log(A[0].value);//the output changes to 4, not 3Descubrí que al clonar una matriz normal, no ocurrirá este problema:
A = [3, 1]; B = [...A]; B[0] = 4; console.log(A[0]);//the output is still 3Sé que en JavaScript, uno de los propósitos de la clonación es evitar que dos variables hagan referencia a la misma memoria, pero ¿por qué el elemento en A también se modificaría en el ejemplo?
Si entiendo mal algún concepto, espero que me puedan ayudar a resolverlo, o si hay algún problema similar que se haya preguntado y resuelto antes, le agradecería que pudiera compartir el enlace.
Spread Operator u Object.assign() clonaciones superficiales hasta un solo nivel. Para la clonación profunda, es posible que necesite usar una biblioteca popular llamada loadash y allí tiene una función deepClone() que puede usar.
También un truco muy común que usamos para los datos JSON, como tú (sin funciones, etc.) es que hacemos lo siguiente:
let deepClone = JSON.parse(JSON.stringify(nodesArray));Así que puedes probar esto también :)
El motivo de ese comportamiento es que en el primer ejemplo tiene una matriz de objetos, que también son variables de referencia.
Está creando una nueva instancia de una matriz en sí, pero no está creando nuevos objetos. En lugar de eso, pasa la referencia a los mismos objetos que se usaron en la primera matriz.
Spread crea una nueva referencia para la matriz. Pero solo hace un nivel de clonación. Ahora la matriz A y la matriz B apuntan a diferentes referencias.
Pero en el caso de los objetos (primer caso), los elementos dentro de la matriz aún apuntan a la misma referencia. Esto no sucede con el primitivo (2º caso). Es por eso que hacer B[0] afecta el first element of array B que es un primitivo y lo reemplaza.