浅拷贝与深拷贝的基本概念

2023-12-13 02:36:26

透视JavaScript中的深拷贝与浅拷贝

了解JavaScript中的深拷贝与浅拷贝概念对于编写高效且可维护的代码至关重要。

浅拷贝创建新变量，并将现有变量的值复制到新变量中。这意味着新变量将指向相同的值，对一个变量的修改也会影响另一个变量。

另一方面，深拷贝创建新变量，并复制现有变量的值以及所有嵌套对象和数组的值。这意味着新变量指向新值，对一个变量的修改不会影响另一个变量。

浅拷贝在处理简单数据类型时非常有效，例如数字、字符串和布尔值。但是，当涉及到复杂数据类型（例如对象和数组）时，浅拷贝可能会导致问题。

考虑以下示例：

const person = {
  name: 'John Doe',
  age: 30,
  address: {
    street: '123 Main Street',
    city: 'Anytown',
    state: 'CA',
    zip: '12345'
  }
};

const person2 = {...person};

在这段代码中，我们使用展开运算符(...)创建person2的浅拷贝。这意味着person2将指向person对象相同的值。

现在，让我们修改person2的address属性：

person2.address.city = 'New City';

此更改也会影响person对象，因为两个对象指向相同的值。

深拷贝可以避免浅拷贝的局限性。当我们创建复杂数据类型（例如对象和数组）的深拷贝时，新变量将指向新值，对一个变量的修改不会影响另一个变量。

考虑以下示例：

const person = {
  name: 'John Doe',
  age: 30,
  address: {
    street: '123 Main Street',
    city: 'Anytown',
    state: 'CA',
    zip: '12345'
  }
};

const person2 = JSON.parse(JSON.stringify(person));