工作场景中浅拷贝和深拷贝的区分以及方法应用指南

2023-09-23 16:09:52

赋值运算符：浅拷贝的便捷之选

在JavaScript中，赋值运算符（=）是进行浅拷贝的简单方法。当您使用赋值运算符将一个对象或数组赋值给另一个变量时，实际上是将该对象的引用复制给了新的变量。这意味着，两个变量都指向同一块内存地址，对其中一个变量所做的任何更改都将反映在另一个变量中。

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

// 使用赋值运算符进行浅拷贝
const copiedObject = originalObject;

// 更改 copiedObject 的属性
copiedObject.name = "Jane";

// 输出 originalObject 的属性
console.log(originalObject.name); // 输出: "Jane"

在上面的示例中，使用赋值运算符将 originalObject 赋值给 copiedObject，导致两个变量都指向同一块内存地址。当我们更改 copiedObject 的属性时，originalObject 的属性也随之改变，这表明了浅拷贝的特性。

浅拷贝方法：灵活应对不同场景

除了赋值运算符，JavaScript 还提供了多种浅拷贝方法，可满足不同场景的需要。这些方法包括：

slice() 方法： 用于复制数组。slice() 方法返回一个新数组，该数组包含原始数组的指定范围内的元素。
concat() 方法： 用于连接数组。concat() 方法将一个或多个数组合并成一个新数组。
JSON.parse() 和 JSON.stringify() 方法： 用于将对象或数组转换为 JSON 字符串，然后再将其解析回原始数据。这种方法可以实现浅拷贝，因为它会创建一个新对象或数组，但不会复制嵌套的对象或数组的引用。

深拷贝方法：彻底隔离数据变更

在某些情况下，我们需要对数据进行彻底隔离的拷贝，以确保更改一个变量不会影响另一个变量。这时，我们可以使用深拷贝方法。深拷贝方法会创建一个新对象或数组，并复制所有嵌套的对象或数组的引用，从而实现数据的彻底隔离。

JavaScript 中常用的深拷贝方法包括：

ES6 展开运算符（...）： ES6 展开运算符可以用于复制数组和对象。它会创建一个新数组或对象，并复制所有元素或属性的引用。
Lodash 库的 _.cloneDeep() 方法： Lodash 库提供了一个名为 _.cloneDeep() 的方法，可以实现深拷贝。该方法会创建一个新对象或数组，并递归复制所有嵌套的对象或数组的引用。