为什么更改解构对象中的 Number 值，同时更改原始对象中的值？

如何解决为什么更改解构对象中的 Number 值，同时更改原始对象中的值？

我已经声明了以下对象：

const restaurant = {
  openingHours: {
    thu: {
      open: 12,close: 22,},fri: {
      open: 11,close: 23,saturday: {
      open: 0,// Open 24 hours
      close: 24,}
};

然后我将openingHours对象破坏成一个新的变量名friday：

const { fri: friday } = restaurant.openingHours;

比我修改了 friday 对象中开放时间属性的值：

friday.open = 5;

最后我检查了更改是否影响原始餐厅财产：

console.log(restaurant.openingHours.fri.open,friday.open); // prints 5 5

我不明白为什么它会将 restaurant.openingHours.fri.open 的值更改为 5？

因为如果我有以下代码：

let originalAge =5;
let newAge = originalAge;
newAge =6;
console.log(originalAge) // will print 5,So what is the difference here?

解决方法

因为“friday”是一个对象并作为引用传递，而 originalAge 是一个原始值（数字/字符串/布尔值...）。

你可以试试这个：

const { fri } = restaurant.openingHours;
const friday = { ...fri };

这将创建一个星期五的浅拷贝（如果所有第一级值都是基元，则将创建一个真正的副本）

您已经通过解构运算符提取了对内部对象 fir 的引用。它仍然指向 openingHours

的内部对象

要解除绑定，您可以使用以下代码段：


const friday = Object.assign({},restaurant.openingHours.fri);

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign - 阅读有关分配方法的更多信息。

以下解构语法：

const { fri: friday } = restaurant.openingHours;

...脱糖：

const friday = restaurant.openingHours.fri;

以上都将变量 friday 设置为对对象的引用：

{
  open: 11,close: 23,}

由于上述对象在您的 restaurant.openingHours.fri 对象中也是相同的引用，因此 friday 和 restaurant.openingHours.fri 都将引用内存中的相同对象。因此，当您这样做时：

friday.open = 5;

您正在更改内存中的一个对象，friday 和 restaurant.openingHours.fri 都指向该对象。

但是，在您的示例中，您使用的是按值复制的原语（即：5）。所以它们不会在你的记忆中共享（所以改变一个不会改变另一个）。

您可以通过更新解构语法以使用 rest syntax 来复制 .fri 对象的一种方法：

const { fri: {...friday} } = restaurant.openingHours;

const restaurant = {
  openingHours: {
    thu: {
      open: 12,close: 22,},fri: {
      open: 11,saturday: {
      open: 0,// Open 24 hours
      close: 24,}
};

const { fri: {...friday} } = restaurant.openingHours;
friday.open = 5;
console.log(friday,restaurant.openingHours.fri);