传播语法会创建浅副本还是深副本？

Question

几天来，我对浅副本和深层副本的真实定义感到非常困惑。

当我阅读MDN文档时（）在浅副本上，这都是有道理的。第一段清楚地说明了什么是浅副本。文档说

对象的浅副本是一个副本，其属性共享与制作副本的源对象相同的参考（指向基础值相同的基础值）。结果，当您更改源或副本时，您也可能会导致另一个对象更改 - 因此，您可能无意中会导致对源的更改或您不期望的副本。

我完全明白了那部分。从我的理解来看，以下代码示例是浅副本的示例，因为更改源或副本会导致另一个对象也更改。

let a = {
    food: "pasta",
    restaurantName: "myPastPlace"
}

let b = a

b.food = "hamburger"

console.log(b.food) //hamburger
console.log(a.food) //hamburger

因此，令人困惑的部分是，当我使用差异语法制作副本时。这是深副本还是浅副本？因为对于我的第一层，对我来说，传播语法（操作员）正在进行深层副本。但是，MDN DOC说，传播语法会创建浅副本而不是深副本。

在JavaScript中，所有标准内置的对象拷贝操作（vrable语法，array.prototype.concat（），array.prototype.slice（），array.from（），object.assign（）和对象。创建（））创建浅副本而不是深副本。

let a = {
    food: "pasta",
    restaurantName: "myPastPlace"
}

let b = {...a}
console.log(b)

b.food = "hamburger"

console.log(b.food) //hamburger
console.log(a.food) //pasta

Answer 1

变量可以包含一个值（如果具有原始值，例如 1 ），则可以包含一个值（如果对象，例如 {food：“ pasta”} 。只能复制原始类型，并且由于它们不包含属性，因此

如果您将参考文献视为原始值， 则不存在浅层/深度区别。参考。 “复制”是A value 的副本，

参考不被视为非主要值的值，有三种不同的方案：

• 核心发行 。 /代码>，仅指向同一对象；它反映在副本中，但这是错误的：没有副本，只有一个对象。无论您从哪个参考访问对象，它都是相同的实体。这就像拍皮特先生一样，想知道为什么布拉德对你生气 - 布拉德和皮特先生是同一个人，而不是克隆人。

let a = {
    food: "pasta",
    contents: {
        flour: 1,
        water: 1
    }
}
let b = a;
a.taste = "good";
a.contents.flour = 2;
console.log(b);

• 浅副本制作对象的副本，但是任何包含引用的属性仍然如此 - 导致核心属性。如果您更改任何一个对象，则不会受到影响；但是，如果您更改属性所指的任何对象，您也会看到另一个对象的更改。在此示例中，您将看到 b.contents.flour 受 a 的更改影响（因为 b.contents 和 a .contents 请参阅同一对象， {面粉：1，水：2} ），但是 a.taste 不存在（因为 a 和 b 是对象本身）。

let a = {
    food: "pasta",
    contents: {
        flour: 1,
        water: 1
    }
}
let b = {...a};
a.taste = "good";
a.contents.flour = 2;
console.log(b);

• 深拷贝也递归复制每个属性，因此没有核心参考 - 原始对象及其属性发生的任何事情，该副本都不会受到影响。在这里， b.taste 和 b.contents.flour 不受 a 中的更改影响。

let a = {
    food: "pasta",
    contents: {
        flour: 1,
        water: 1
    }
}
let b = structuredClone(a);
a.taste = "good";
a.contents.flour = 2;
console.log(b);

请注意，目前 structuredclone 仍然很新。如果任何用户正在使用较旧的浏览器，则可能需要使用polyfill。

Answer 2

传播操作员允许您进行浅副本。要进行深度副本，请使用 structruestclone（）方法。

因此，在您的情况下，它看起来会如下：

let a = {
    food: "pasta",
    restaurantName: "myPastPlace"
}

let b = structuredClone(a);

阅读更多： https：/ /developer.mozilla.org/en-us/docs/web/api/structuredclone

Answer 3

逐步内存可视化（带有示例地址）

初始对象创建：

创建令A = {...}时，JavaScript分配了A及其属性的内存，并且每个对象中的每个对象都有一个地址（例如，六核，用于六核这里的简单性）。

A有一个地址0x001。
内容对象{面粉：1，水：1}嵌套在A内，并在地址0x002中分别存储。

Address     Value
0x001       a → { food: "pasta", contents: 0x002 }
0x002       contents → { flour: 1, water: 1 }

带有Let b = {... a}的浅副本：

使用vread语法让b = {... a}，javascript创建一个新的对象b，带有新的内存地址0x003。该顶级对象B具有A原始属性的副本，但是对于嵌套对象，它引用了与A. contents相同的内存位置。

B有自己的地址0x003。
地址相同

Address     Value
0x001       a → { food: "pasta", contents: 0x002 }
0x002       contents → { flour: 1, water: 1 }
0x003       b → { food: "pasta", contents: 0x002 }

butents指向与a.contents（0x002）修改a.taste and a.contents.flour：

当a.taste =“ good”时的 ；添加，A会获得新的特性味道而不会影响B，因为B没有味道。

a.contents.flour = 2;经过修改，更改是在地址0x002上进行的，因此A。contents和B. contents反映了此更新，因为它们引用了相同的内存。

Address     Value
0x001       a → { food: "pasta", contents: 0x002, taste: "good" }
0x002       contents → { flour: 2, water: 1 }
0x003       b → { food: "pasta", contents: 0x002 }

浅副本（如定义：对象的浅副本是一个副本，其属性共享相同的参考）与C ++ 中的“通过参考”概念完全不同。

在“通过引用”中： b =＆amp; a ; b和a在内存上共享相同的地址，*b 中的所有更改均在 a 和vice vice Verse中。**