JavaScript中的深浅拷贝：理解变量的复制

2023-09-14 08:24:40

在JavaScript中，变量可以存储两种不同类型的数据：基本类型和引用类型。基本类型包括数字、字符串和布尔值，它们直接存储在变量中。引用类型包括对象、数组和函数，它们存储指向内存中其他位置的引用。

当您对基本类型变量进行赋值时，您正在创建该值的副本。这意味着对副本所做的任何更改都不会影响原始变量。例如：

let num1 = 10;
let num2 = num1;

num2 = 20;

console.log(num1); // 输出：10
console.log(num2); // 输出：20

在上面的示例中，我们创建了两个变量num1和num2，并使num2等于num1。然后，我们更改了num2的值为20。但是，num1的值仍然为10，因为我们只创建了num1的副本。

引用类型变量的情况有所不同。当您对引用类型变量进行赋值时，您正在创建指向该变量的内存位置的副本。这意味着对副本所做的任何更改都会影响原始变量。例如：

let obj1 = {
  name: "John",
  age: 30
};

let obj2 = obj1;

obj2.name = "Mary";

console.log(obj1); // 输出：{ name: "Mary", age: 30 }
console.log(obj2); // 输出：{ name: "Mary", age: 30 }

在上面的示例中，我们创建了两个变量obj1和obj2，并使obj2等于obj1。然后，我们更改了obj2的name属性的值为"Mary"。但是，obj1的name属性的值也变为"Mary"，因为我们只是创建了obj1的副本。

这就是为什么在复制对象或数组时使用深浅拷贝非常重要的原因。深浅拷贝可以帮助您创建对象的副本，而不会影响原始对象。

浅拷贝

浅拷贝只复制对象或数组的顶层属性。这意味着如果对象或数组包含其他对象或数组，这些对象或数组不会被复制。例如：

let obj1 = {
  name: "John",
  age: 30,
  address: {
    street: "123 Main Street",
    city: "Anytown",
    state: "CA",
    zip: "12345"
  }
};

let obj2 = {...obj1};

obj2.address.street = "456 Elm Street";

console.log(obj1); // 输出：{ name: "John", age: 30, address: { street: "456 Elm Street", city: "Anytown", state: "CA", zip: "12345" } }
console.log(obj2); // 输出：{ name: "John", age: 30, address: { street: "456 Elm Street", city: "Anytown", state: "CA", zip: "12345" } }

在上面的示例中，我们创建了两个变量obj1和obj2，并使用展开运算符(...)对obj1进行浅拷贝。然后，我们更改了obj2的address属性的street属性的值为"456 Elm Street"。但是，obj1的address属性的street属性的值也变为"456 Elm Street"，因为我们只对obj1进行了浅拷贝。

深拷贝

深拷贝会复制对象或数组的所有属性，包括其他对象或数组。这意味着如果对象或数组包含其他对象或数组，这些对象或数组也会被复制。例如：

let obj1 = {
  name: "John",
  age: 30,
  address: {
    street: "123 Main Street",
    city: "Anytown",
    state: "CA",
    zip: "12345"
  }
};

let obj2 = JSON.parse(JSON.stringify(obj1));

obj2.address.street = "456 Elm Street";

console.log(obj1); // 输出：{ name: "John", age: 30, address: { street: "123 Main Street", city: "Anytown", state: "CA", zip: "12345" } }
console.log(obj2); // 输出：{ name: "John", age: 30, address: { street: "456 Elm Street", city: "Anytown", state: "CA", zip: "12345" } }

在上面的示例中，我们创建了两个变量obj1和obj2，并使用JSON.stringify()和JSON.parse()方法对obj1进行深拷贝。然后，我们更改了obj2的address属性的street属性的值为"456 Elm Street"。但是，obj1的address属性的street属性的值仍然为"123 Main Street"，因为我们对obj1进行了深拷贝。

安全建议

在进行深浅拷贝时，需要注意以下几点：

性能考虑：深拷贝通常比浅拷贝更耗时，因为它需要递归地复制所有嵌套的对象和数组。如果性能是一个关键因素，可能需要考虑其他方法，如使用库（如lodash的_.cloneDeep）来实现深拷贝。
循环引用：如果对象或数组包含循环引用，深拷贝可能会失败或导致无限递归。确保在实现深拷贝时处理这种情况。
函数和原型链：深拷贝通常不会复制函数和对象的原型链。如果需要复制这些内容，可能需要额外的处理。