JavaScript中的深拷贝与浅拷贝

在JavaScript中，拷贝是常见的操作。简单来讲，拷贝就是将一个对象的值复制到另一个对象中。然而，拷贝并不总是那么简单，特别是在涉及到嵌套对象时。在JavaScript中，有两种常见的拷贝方式，分别是深拷贝和浅拷贝。本文将详细介绍深拷贝和浅拷贝的概念以及如何在JavaScript中实现它们。

浅拷贝

浅拷贝是指创建一个新对象，将原始对象的属性值复制到新对象中。浅拷贝只复制对象的引用，而不是创建对象的副本。

使用Object.assign实现浅拷贝

在JavaScript中，可以使用Object.assign()方法来实现浅拷贝。Object.assign()方法可以从一个或多个源对象中拷贝属性到目标对象中。

let sourceObj = {
  name: "Alice",
  age: 30,
  address: {
    city: "New York",
    country: "USA"
  }
};

let targetObj = Object.assign({}, sourceObj);

console.log(targetObj);

在上面的例子中，sourceObj是原始对象，targetObj是通过浅拷贝创建的新对象。Object.assign()方法将sourceObj的属性复制到targetObj中。然而，如果原始对象中存在嵌套对象，浅拷贝会复制对象的引用而不是创建对象的副本。这意味着，如果修改了嵌套对象，在源对象和目标对象中都会发生变化。

sourceObj.address.city = "San Francisco";

console.log(targetObj);

在上面的例子中，修改了源对象中嵌套对象的属性值。结果可以看到，目标对象的嵌套对象也发生了变化。这是因为浅拷贝只复制了对象的引用。

深拷贝

深拷贝是指创建一个新对象，并且递归地将原始对象及其嵌套对象的属性值复制到新对象中。深拷贝会创建对象的完整副本，而不仅仅是对对象的引用。

使用JSON.stringify和JSON.parse实现深拷贝

在JavaScript中，可以使用JSON.stringify()和JSON.parse()方法来实现深拷贝。JSON.stringify()方法将对象转换为JSON字符串，JSON.parse()方法将JSON字符串转换为对象。

let sourceObj = {
  name: "Alice",
  age: 30,
  address: {
    city: "New York",
    country: "USA"
  }
};

let targetObj = JSON.parse(JSON.stringify(sourceObj));

console.log(targetObj);

在上面的例子中，通过先将原始对象转换为JSON字符串，再将JSON字符串转换为新对象，实现了深拷贝。无论是原始对象还是嵌套对象，都会复制到新对象中。因此，在修改嵌套对象时，源对象和目标对象之间不会相互影响。

需要注意的是，使用JSON.stringify()和JSON.parse()方法进行深拷贝的前提是对象是可序列化的。也就是说，对象的属性值只能是基本数据类型（如字符串、数字、布尔值、null和undefined）或者是能够被序列化的对象（如数组和普通对象）。否则，深拷贝可能会失败或产生不可预料的结果。

总结

深拷贝和浅拷贝是JavaScript中常见的拷贝方式。浅拷贝只复制对象的引用，而深拷贝创建了对象的完整副本。可以使用Object.assign()方法实现浅拷贝，也可以使用JSON.stringify()和JSON.parse()方法实现深拷贝。在选择拷贝方式时，需要根据具体需求和对象的结构来进行选择，以确保代码的正确性和性能的高效性。

本文来自极简博客，作者：星辰之海姬，转载请注明原文链接：JavaScript中的深拷贝与浅拷贝