JS深拷贝与浅拷贝及使用场景

2023-11-09 18:31:50

在JavaScript中，当我们对对象进行赋值时，如果直接使用等号（=）进行赋值，则会产生浅拷贝，即两个变量指向同一个内存地址，对其中一个变量的修改将同时影响另一个变量。而深拷贝则会创建一个新的对象，并把原对象的所有属性值复制到新对象中，两个变量指向不同的内存地址，对其中一个变量的修改不会影响另一个变量。

浅拷贝

浅拷贝只复制对象本身的属性值，不会复制嵌套的对象。因此，如果我们对嵌套对象进行修改，则只会影响浅拷贝的对象，而不会影响原对象。

浅拷贝的实现

可以使用扩展运算符（...）来实现浅拷贝。

const person1 = {
  name: 'John',
  age: 30,
  son: {
    name: 'Bob',
    age: 10
  }
};

const person2 = { ...person1 };

person2.son.name = 'Alice';

console.log(person1); // { name: 'John', age: 30, son: { name: 'Alice', age: 10 } }
console.log(person2); // { name: 'John', age: 30, son: { name: 'Alice', age: 10 } }

浅拷贝的使用场景

浅拷贝通常用于需要快速复制对象的情况，例如在函数参数传递中或在创建一个新对象时。

深拷贝

深拷贝会复制对象本身的属性值以及所有嵌套对象的属性值。因此，如果我们对嵌套对象进行修改，则只会影响深拷贝的对象，而不会影响原对象。

深拷贝的实现

可以使用JSON.parse()和JSON.stringify()来实现深拷贝。

const person1 = {
  name: 'John',
  age: 30,
  son: {
    name: 'Bob',
    age: 10
  }
};

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

person2.son.name = 'Alice';

console.log(person1); // { name: 'John', age: 30, son: { name: 'Bob', age: 10 } }
console.log(person2); // { name: 'John', age: 30, son: { name: 'Alice', age: 10 } }