javascript - 如何在不突变的情况下更改对象内部的对象？

Question

所以我的问题是如何在不改变用户对象的情况下更改 petNames 对象。

const user = { 
        name: 'Harry', 
        age: 50, 
        petNames: { 
         dog: 'Lisie', 
         cat: 'Foxer' 
        } 
    };

第一层我们可以改成

{...user, age: 48 }

它会返回

{ 
 name: 'Harry', 
 age: 48, 
 petNames: { 
    dog: 'Lisie', 
    cat: 'Foxer' 
 } 
};

但是我怎样才能改变 petNames 呢？

例如，狗名更改为“Rex”。

然后得到像

这样的对象

{ 
 name: 'Harry', 
 age: 50, 
 petNames: { 
    dog: 'Rex', 
    cat: 'Foxer' 
 } 
};

谢谢!

Answer 1

您也可以传播内部属性:

const user = {
  name: 'Harry',
  age: 50,
  petNames: {
    dog: 'Lisie',
    cat: 'Foxer'
  }
};

const newUser = {
  ...user,
  petNames: {
    ...user.petNames,
    dog: 'rex'
  }
};

console.log(user.petNames === newUser.petNames); // false