Quelle est la meilleure façon de mettre à jour certaines propriétés d'un objet de manière immuable en JavaScript?

Question

Disons que nous avons un objet comme:

const obj = { 
    foo: { 
    a: { type: 'foo', baz: 1 }, 
    b: { type: 'bar', baz: 2 }, 
    c: { type: 'foo', baz: 3 } 
    } 
} 

Maintenant, je veux mettre à jour toutes les propriétés baz-5 si le type de la propriété dans foo est foo. Et je voudrais le modifier de façon immuable, c'est-à-dire qu'il ne modifierait pas l'objet origine mais retournerait un nouvel objet.

Answer 1

Object.assign est parfait pour cela, de la docs:

La méthode Object.assign() est utilisée pour copier les valeurs de toutes les propriétés propres dénombrables d'un ou plusieurs objets source à un objet cible. Cela renverra l'objet cible.

Et vous pouvez l'utiliser comme ceci:

Object.assign(
    {}, 
    obj, 
    { 
     foo: { 
      a: { 
       baz: obj.foo.a.type === 'foo' ? 5 : obj.foo.a 
      } 
     } 
    } 
); 

Answer 2

Vous pouvez utiliser Object.entries(), Array.prototype.map(), élément propagation, propriété calculée, Object.assign()

const obj = { 
 
    foo: { 
 
    a: { type: 'foo', baz: 1 }, 
 
    b: { type: 'bar', baz: 2 }, 
 
    c: { type: 'foo', baz: 3 } 
 
    } 
 
} 
 

 
let key = Object.keys(obj).pop(); 
 

 
let res = {[key]: Object.assign({}, 
 
      ...Object.entries(obj[key]) 
 
      .map(([prop, {type,baz}]) => 
 
      ({[prop]: {type,baz:type === "foo" ? 5 : baz}}) 
 
     ))}; 
 
    
 
console.log(res, obj);

Answer 3

I normalement écrire Object.create() pour copie superficielle, mais une copie profonde (objet imbriqué) que je fais avec JSON.parse(JSON.stringify(nestedObject))

const obj = { 
    foo: { 
    a: { type: 'foo', baz: 1 }, 
    b: { type: 'bar', baz: 2 }, 
    c: { type: 'foo', baz: 3 } 
    } 
} 
var temp = JSON.parse(JSON.stringify(obj)) 

for(var i in temp.foo) { 
    if(temp.foo[i].type == "foo") { 
    temp.foo[i].baz = 5; 
    } 
} 
console.log(temp); 
console.log(obj);