揭秘JS中的浅拷贝与深拷贝：从零开始轻松掌握！

前言

在JavaScript中，"拷贝"意味着复制一个对象或变量的值。然而，JavaScript中的拷贝并不是简单的值传递，而是有两种不同的方式：浅拷贝和深拷贝。理解这两种拷贝方法之间的区别至关重要，因为它会影响代码的行为和结果。

浅拷贝

浅拷贝创建一个新对象，并将源对象的引用值复制到新对象中。换句话说，新对象只复制源对象的指针，而不是实际的值。如果源对象是一个引用类型（如对象或数组），则新对象也将引用源对象的相同内存位置。

语法：

const newObject = {...sourceObject};

示例：

const person = { name: "John", age: 30 };
const shallowCopy = {...person};
shallowCopy.name = "Jane";
console.log(person.name); // 输出："Jane"

在上面的示例中，shallowCopy指向与person相同的对象内存位置。当更改shallowCopy的属性时，源对象person也会受到影响，因为它们引用的是同一块内存。

深拷贝

深拷贝创建一个新对象，并递归地复制源对象的所有属性值，包括引用类型的值。这意味着新对象拥有自己独立的内存位置，与源对象完全分离。

语法：

可以使用库函数（如JSON.parse(JSON.stringify(sourceObject))）或递归算法实现深拷贝。

示例：

const person = { name: "John", age: 30 };
const deepCopy = JSON.parse(JSON.stringify(person));
deepCopy.name = "Jane";
console.log(person.name); // 输出："John"

在上面的示例中，deepCopy是一个全新的对象，与person没有关联。当更改deepCopy的属性时，源对象person不会受到影响。

浅拷贝与深拷贝的区别

特征	浅拷贝	深拷贝
复制方式	只复制引用值	复制实际值，包括引用类型
内存位置	与源对象共享	独立的内存位置
更改影响	更改新对象会影响源对象	更改新对象不会影响源对象

何时使用浅拷贝与深拷贝

• 浅拷贝： 当只需要创建一个源对象的副本，并且对源对象进行的更改不需要反映在副本中时，可以使用浅拷贝。例如，克隆一个只包含原始值（如字符串或数字）的简单对象。
• 深拷贝： 当需要创建一个与源对象完全独立的副本时，可以使用深拷贝。例如，克隆包含引用类型（如对象或数组）的复杂对象，或者当需要确保源对象不会受到新对象的更改影响时。

结论

掌握JavaScript中的浅拷贝和深拷贝对于编写健壮且高效的代码至关重要。了解这两种拷贝方法之间的区别，并根据具体情况选择适当的方法，可以提高代码的可维护性和性能。