Tengo una pregunta sobre la sintaxis extendida y una serie de objetos.
Tener una matriz de objetos como:
const array = [{age:50}, {age:27}] De acuerdo con esta respuesta: https://stackoverflow.com/a/54138394/6781511 , el uso de la sintaxis extendida dará como resultado que referencedArray tenga una copia superficial de array .
const referencedArray = [...array]Entonces, ¿cuál es la diferencia entre usar la sintaxis extendida y no usarla?
const referencedArray = [...array]contra
const referencedArray = arrayVea el siguiente ejemplo.
Cuando realiza una copia superficial, la asignación a un elemento del original no afecta al clon. Cuando no haces una copia, la asignación al original afecta a la otra referencia.
Dado que es una copia superficial, la asignación de propiedades de los objetos en la matriz los afecta a todos. Solo se copió la matriz mediante la difusión, no los objetos.
const array = [{age:50}, {age:27}]; const clonedArray = [...array]; const notClonedArray = array; array[0] = {age: 100}; array[1].age = 30; console.log("Original:", array); console.log("Cloned:", clonedArray); console.log("Not cloned:", notClonedArray);Los objetos dentro de las matrices tienen la misma referencia en ambos, pero en el escenario extendido, la modificación de la matriz no afectará al original.
const array = [{ name: 'Joe' }, { name: 'Paul' }]; const spreadArray = [...array]; const cloneArray = array; spreadArray[3] = { name: 'Bob' }; console.log(array); // [{ name: 'Joe' }, { name: 'Paul' }]; cloneArray[3] = { name: 'Bob' }; console.log(array); // [{ name: 'Joe' }, { name: 'Paul' }, { name: 'Bob'} ]; Esto se debe a que cloneArray se asigna por referencia a array , mientras que spreadArray se asigna a una nueva matriz con los mismos elementos que array . por eso también
cloneArray === array; // true spreadArray === array; // false