什么是 JavaScript 中的浅拷贝？

浅拷贝：在浅拷贝的情况下，当我们将原始对象复制到克隆对象中时，克隆对象具有原始对象内存地址的副本。意味着两者都指向相同的内存地址。

原始对象和克隆对象在内部都指向同一个引用对象。由于它们指向相同的内存地址，因此如果我们更改克隆对象，那么更改将反映回原始对象，因为它们指向相同的内存地址。

Javascript

  
var obj1 = {
    id: 1,
    company: "GFG"
};
var obj2 = obj1;
obj2.id = 2;
console.log(obj1.id);
console.log(obj2.id);
  

输出：

2
2

说明：在这种情况下，我们将原始对象 obj1 克隆到对象 obj2 中。由于如果用对象 obj2 更改 id，它们都在内部引用相同的内存地址，那么它也会更改对象 obj1 的 id。

obj2.id = 2也会改变对象 obj1 的 id。

这称为浅拷贝。浅拷贝意味着一旦我们对克隆对象进行了更改，它也会被反射回原始对象。

但是在深拷贝的情况下，改变克隆对象的值不会反映到原始对象中，因为两者都指向不同的引用对象。因为原始对象有自己的引用对象，克隆后，克隆的对象有自己的引用对象。两者是不同的。

如何避免浅拷贝，以便更改克隆的对象不会影响我们的原始对象。我们可以使用以下方法来避免浅拷贝。

• 使用扩展运算符
• 使用 Object.assign运算符
• 使用 JSON.stringify 和 JSON.parse

使用扩展运算符：我们可以借助扩展运算符符避免创建浅拷贝。

Javascript

    var obj1 = {
        id: 1,
        company: "GFG"
    };
    var obj2 = { ...obj1 };
    obj2.id = 2;
    console.log(obj1.id);
    console.log(obj2.id);

输出：

1
2

这里我们使用对象 obj2 更改 id，但它没有更改对象 obj1 的 id。

使用 Object.assign运算符：它需要两个参数：

• 空对象和
• 原始对象

Javascript

    var obj1 = {
        id: 1,
        company: "GFG"
    };
    var obj2 = Object.assign({}, obj1);
    obj2.id = 2;
    console.log(obj1.id);
    console.log(obj2.id);

输出：

1
2

但是使用 Object.assign运算符的问题在于它在嵌套对象的情况下不能完美地工作。

Javascript

    var obj1 = {
        id: 1,
        company: "GFG",
        details:
        {
            employee_no: 10
        }
    };
    var obj2 = Object.assign({}, obj1);
    obj2.details.employee_no = 20;
    console.log(obj1.details.employee_no);
    console.log(obj2.details.employee_no);

输出：

20
20

在这种情况下，我们有一个嵌套对象，我们正在 obj2 的帮助下更改 employee_no。因为它 obj1 employee_no 也被改变了。所以 Object.assign 在嵌套对象的情况下不能完美地工作。

JSON.stringify 和 JSON.parse：它在嵌套对象的情况下完美运行。与 Object.assign运算符不同，当我们对克隆对象进行任何更改时，它不会更改我们的原始对象。

Javascript

    var obj1 = {
        id: 1,
        company: "GFG",
        details:
        {
            employee_no: 10
        }
    };
    var obj2 = JSON.parse(JSON.stringify(obj1))
    obj2.details.employee_no = 20;
    console.log(obj1.details.employee_no);
    console.log(obj2.details.employee_no);

输出：

10
20