Estoy trabajando con este código a continuación.
const recipes = { recipe1: { title: "pancake", serving: 4, ingredients: ["flour", "egg", "milk", "vanilla", "baking Powder"], }, recipe2: { title: "eggSalad", serving: 2, ingredients: ["egg", "mayo", "lettuce", "cucumber", "tomato"], }, recipe3: { title: "omelette", serving: 4, ingredients: ["egg", "mushroom", "pepper", "salt", "tomato"], } }; const arr1 = Object.assign({}, {...recipes}) Object.values(arr1).forEach(e => { console.log(e.title) console.log(e.serving) console.log(e.ingredients) e.title = "this has been mutated" }) console.log(recipes) Quiero registrar cada receta, lo cual he hecho con éxito. SIN EMBARGO, tampoco quiero mutar el objeto. Pensé que al usar Object.assign junto con el operador ... / spread, cortaría los lazos con el objeto de recipes original. Pero en el último registro de la consola, el objeto original de hecho está mutado y registra cada título de receta con 'this has been mutated'
Estoy muy confundido por qué sucede esto y, además, no puedo encontrar una solución en la que pueda copiar la matriz original sin mutarla.
Estoy seguro de que estoy haciendo algo bastante tonto, pero quiero mantener una buena práctica de mantener las cosas inmutables, ¡y no puedo hacer que esto funcione!
¿Alguien puede ayudarme, o incluso mejor, educarme en lo que me estoy equivocando?
¡Gracias!
Para crear una "copia profunda" de sus objetos anidados, debe crear copias para cada valor no primitivo (objeto simple u objeto de matriz) dentro.
De lo contrario, los objetos dentro seguirán siendo los mismos objetos en el original (aunque haya creado una copia de su "objeto contenedor").
En el caso de sus datos de ejemplo, puede hacerlo usando la sintaxis de propagación recursiva como en el ejemplo a continuación donde se crea la copy :
const recipes = { recipe1: { title: "pancake", serving: 4, ingredients: ["flour", "egg", "milk", "vanilla", "baking Powder"], }, recipe2: { title: "eggSalad", serving: 2, ingredients: ["egg", "mayo", "lettuce", "cucumber", "tomato"], }, recipe3: { title: "omelette", serving: 4, ingredients: ["egg", "mushroom", "pepper", "salt", "tomato"], } }; const copy = Object.fromEntries([...Object.entries(recipes)].map(([name, recipe]) => [name, { ...recipe, ingredients: [...recipe.ingredients], }])); Object.values(copy).forEach(recipe => { console.log(recipe); recipe.title = "this has been mutated"; }) console.log(recipes);En el caso de los datos que se pueden serializar directamente como JSON sin una coerción de tipo (como su ejemplo), también puede simplemente usar:
const copy = JSON.parse(JSON.stringify(recipes));