全面解析 JavaScript 深拷贝与浅拷贝的区别与应用

2023-09-05 18:10:07

JavaScript 深拷贝和浅拷贝的区别

在 JavaScript 中，深拷贝和浅拷贝是复制对象或数组时常用的两种方式。它们的区别在于，深拷贝会创建新对象或数组，并将原对象或数组的所有属性和值复制到新对象或数组中，而浅拷贝只会复制原对象或数组的引用。

举个例子，如果我们有一个对象 person，它包含两个属性 name 和 age。如果我们使用深拷贝来复制这个对象，我们会得到一个新对象 person2，它包含与 person 相同的属性和值。如果我们使用浅拷贝来复制这个对象，我们会得到一个新对象 person3，它指向同一个内存地址，即 person 对象。

// 创建一个对象 person
const person = {
  name: 'John',
  age: 30
};

// 使用深拷贝复制对象 person
const person2 = JSON.parse(JSON.stringify(person));

// 使用浅拷贝复制对象 person
const person3 = person;

// 修改对象 person2 的属性 name
person2.name = 'Jane';

// 打印对象 person、person2 和 person3
console.log(person); // { name: 'John', age: 30 }
console.log(person2); // { name: 'Jane', age: 30 }
console.log(person3); // { name: 'Jane', age: 30 }

从上面的例子中，我们可以看到，当我们使用深拷贝复制对象 person 时，新对象 person2 的属性 name 被修改后，原对象 person 的属性 name 并没有被修改。而当我们使用浅拷贝复制对象 person 时，新对象 person3 的属性 name 被修改后，原对象 person 的属性 name 也被修改了。

JavaScript 深拷贝和浅拷贝的应用

在 JavaScript 中，深拷贝和浅拷贝都有各自的应用场景。

深拷贝的应用场景

当我们需要创建一个与原对象完全独立的新对象时，可以使用深拷贝。
当我们需要复制一个复杂的对象，其中包含其他对象或数组时，可以使用深拷贝。
当我们需要将一个对象复制到另一个对象中，但又不想修改原对象时，可以使用深拷贝。

浅拷贝的应用场景

当我们需要创建一个指向同一个内存地址的新对象时，可以使用浅拷贝。
当我们需要复制一个简单对象，其中不包含其他对象或数组时，可以使用浅拷贝。
当我们需要将一个对象复制到另一个对象中，并且想让这两个对象共享同一个内存地址时，可以使用浅拷贝。

JavaScript 深拷贝和浅拷贝的实现

在 JavaScript 中，我们可以使用多种方法来实现深拷贝和浅拷贝。

深拷贝的实现

我们可以使用 JSON.parse() 和 JSON.stringify() 方法来实现深拷贝。JSON.stringify() 方法将对象或数组转换成 JSON 字符串，而 JSON.parse() 方法将 JSON 字符串转换成对象或数组。通过这种方式，我们可以创建一个与原对象完全独立的新对象。

const person = {
  name: 'John',
  age: 30
};

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

console.log(person); // { name: 'John', age: 30 }
console.log(person2); // { name: 'John', age: 30 }

我们还可以使用 lodash 库的 cloneDeep() 方法来实现深拷贝。cloneDeep() 方法可以对对象或数组进行深度克隆，创建一个与原对象完全独立的新对象。

const person = {
  name: 'John',
  age: 30
};

const person2 = _.cloneDeep(person);

console.log(person); // { name: 'John', age: 30 }
console.log(person2); // { name: 'John', age: 30 }

浅拷贝的实现

我们可以使用赋值运算符 = 来实现浅拷贝。赋值运算符 = 只会复制原对象或数组的引用，不会复制原对象或数组的属性和值。

const person = {
  name: 'John',
  age: 30
};

const person2 = person;

console.log(person); // { name: 'John', age: 30 }
console.log(person2); // { name: 'John', age: 30 }