let arr = [{ age: 3 }, { age: 5 }, { age: 6 }, { age: 7 }]; let exists = arr.find(x => x.age < 4); exists.age += 1; console.log(arr); //output is [{age:4},{age:5},{age:6},{age:7}];En el ejemplo anterior, estoy actualizando el resultado devuelto por el método de búsqueda, pero también cambia el valor de la matriz original, ¿por qué?
Array.prototype.find devolverá el primer elemento que satisfaga la condición que ha pasado como función de devolución de llamada.
Dado que está buscando un objeto cuya propiedad de age sea menor que 4 . Entonces devolverá el primer objeto (cuya age es 3 ). Entonces, si va a verificar la igualdad de exists y arr[0] , devolverá un objeto que satisfaga la condición
let arr = [{ age: 3 }, { age: 5 }, { age: 6 }, { age: 7 }]; let exists = arr.find((x) => x.age < 4); console.log(exists === arr[0]) Por lo tanto, si va a realizar algún tipo de mutación con el objeto que devuelve el método de find , el objeto original reflejará los cambios.
Porque ambos son el mismo objeto solo referencias diferentes.
Si no desea mutar el objeto original, debe clonarlo antes de realizar cualquier tipo de cambio en ese objeto.
Note: Both of the following method does shallow copy
1) Usar spread syntax
let arr = [{ age: 3 }, { age: 5 }, { age: 6 }, { age: 7 }]; let exists = arr.find((x) => x.age < 4); const clone = { ...exists }; clone.age += 1; console.log(arr); /* This is not a part of answer. It is just to give the output full height. So IGNORE IT */ .as-console-wrapper { max-height: 100% !important; top: 0; } 2) Uso de Object.assign
let arr = [{ age: 3 }, { age: 5 }, { age: 6 }, { age: 7 }]; let exists = arr.find((x) => x.age < 4); const clone = Object.assign({}, exists); clone.age += 1; console.log(arr);Porque tienes una matriz de referencias a objetos. En JavaScript, los objetos en realidad se almacenan en otro lugar (llamado "montón") y las variables de objeto en realidad solo contienen las referencias al objeto. Entonces, la razón es porque está actualizando el mismo objeto.
Si desea hacer una clonación superficial de un objeto, puede usar Object.assign({}, obj) .
Además, no directamente relevante para su pregunta, si las propiedades de su objeto en sí mismas contienen otras referencias de objetos, incluidas matrices, y desea que también sean copias, tendrá que clonarlas en profundidad. Esto no lo hace automáticamente una función o un método de JavaScript estándar. Tendrá que encontrar un código que lo haga por usted o escribirlo usted mismo. La última vez que hice esto, usé la función de clonación de randa porque otro desarrollador de mi equipo ya había importado la biblioteca de ramda a nuestro proyecto. Lo que tiene más sentido para su proyecto puede ser diferente.
Es porque los objetos en JavaScript se pasan por referencia, obtuvo ese objeto ({edad: 3}) en existe y luego agregó 1 a su clave "edad", por lo que el objeto original también cambió.
let obj1 = {age: 3 , name: 'jack' } let obj2 = obj1 console.log(obj1 === obj2 ) // true // if you change the second object , the first one will change too : obj2.age = 15 console.log(obj1 , obj2 ) // obj1 = { age: 15 , name: 'jack' } // obj2 = { age: 15 , name: 'jack' }