javascript - Spread Syntax 创建的是浅拷贝还是深拷贝？

Question

几天来我对浅拷贝和深拷贝的真正定义感到非常困惑。

当我阅读关于浅拷贝的 mdn 文档 ( https://developer.mozilla.org/en-US/docs/Glossary/Shallow_copy ) 时，这一切都说得通了。第一段清楚地解释了什么是浅拷贝。文档说

A shallow copy of an object is a copy whose properties share the same references (point to the same underlying values) as those of the source object from which the copy was made. As a result, when you change either the source or the copy, you may also cause the other object to change too — and so, you may end up unintentionally causing changes to the source or copy that you don't expect.

我完全明白了那部分。根据我的理解，下面的代码示例是浅拷贝的示例，因为更改源或副本会导致其他对象也发生更改。

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

let b = a

b.food = "hamburger"

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

所以，令人困惑的部分是当我使用扩展语法制作副本时。这是深拷贝还是浅拷贝？因为对于第一层深度，对我来说，传播语法(运算符)正在制作深拷贝。但是，MDN 文档说传播语法创建的是浅拷贝而不是深拷贝。

In JavaScript, all standard built-in object-copy operations (spread syntax, Array.prototype.concat(), Array.prototype.slice(), Array.from(), Object.assign(), and Object.create()) create shallow copies rather than deep copies.

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" } )。原始类型只能被复制，因为它们不包含任何属性，不存在浅/深之分。

如果您将引用本身视为原始值，b = a是一份引用。但是由于 JavaScript 不让您直接访问引用(就像 C 那样，其中等效的概念是指针)，将复制引用称为“复制”是一种误导和混淆。在 JavaScript 上下文中，“复制”是一个值的副本，引用不被视为值。

对于非原始值，存在三种不同的场景:

• 共同引用，由 b = a 创建, 仅仅指向同一个对象；如果你修改 a无论如何，b以同样的方式受到影响。直觉上你会说无论你修改哪个对象都会反射(reflect)在副本中，但这是错误的:没有副本，只有一个对象。无论您从哪个引用访问对象，它都是同一个实体。这就像扇皮特先生耳光，并想知道布拉德为什么生你的气 — 布拉德和皮特先生是同一个人，而不是克隆人。

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 指的是同一个对象， { flour: 1, water: 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。