javascript - 如何在不更改对象的情况下更改对象？

所以我的问题是如何在用户对象内部更改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'
 }
};

谢谢！

最佳答案

您还可以传播内部属性：

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