JS深度解读：浅拷贝与深拷贝的奥妙

2024-01-10 10:44:59

在JavaScript的世界里，变量值不仅仅是简单的数字或字符串，还有更复杂的数据结构，如数组和对象。理解浅拷贝和深拷贝的概念对于充分利用这些数据结构非常重要。

浅拷贝（也称为值复制或引用复制）是指复制变量的值。如果变量的值是基本类型（如数字、字符串、布尔值），则浅拷贝将创建一个新变量，并为其分配与原始变量相同的值。如果变量的值是引用类型（如数组或对象），则浅拷贝将创建一个新变量，并为其分配对原始变量的引用。这意味着两个变量指向同一个对象，因此对其中一个变量所做的更改也将反映在另一个变量上。

深拷贝（也称为完全复制或克隆）是指复制变量的值及其所有属性。如果变量的值是基本类型，则深拷贝将创建一个新变量，并为其分配与原始变量相同的值。如果变量的值是引用类型，则深拷贝将创建一个新对象，并为其复制原始对象的所有属性。这意味着两个变量指向不同的对象，因此对其中一个变量所做的更改不会影响另一个变量。

理解浅拷贝和深拷贝的差异对于编写高效且可维护的JavaScript代码非常重要。例如，在需要复制数据结构时，如果使用浅拷贝，则对原始数据结构所做的更改也会反映在复制的数据结构上，这可能会导致意想不到的行为。因此，在需要复制数据结构时，通常建议使用深拷贝。

浅拷贝与深拷贝的实现

下面提供一些实现浅拷贝和深拷贝的代码示例：

浅拷贝：

// 浅拷贝数组
const originalArray = [1, 2, 3];
const shallowCopyArray = originalArray.slice();

// 浅拷贝对象
const originalObject = { name: 'John', age: 30 };
const shallowCopyObject = Object.assign({}, originalObject);

// 修改浅拷贝后的数据
shallowCopyArray[0] = 4;
shallowCopyObject.name = 'Jane';

// 输出结果
console.log(originalArray); // [1, 2, 3]
console.log(shallowCopyArray); // [4, 2, 3]
console.log(originalObject); // { name: 'Jane', age: 30 }
console.log(shallowCopyObject); // { name: 'Jane', age: 30 }

深拷贝：

// 深拷贝数组
const originalArray = [1, 2, 3];
const deepCopyArray = JSON.parse(JSON.stringify(originalArray));

// 深拷贝对象
const originalObject = { name: 'John', age: 30 };
const deepCopyObject = JSON.parse(JSON.stringify(originalObject));

// 修改深拷贝后的数据
deepCopyArray[0] = 4;
deepCopyObject.name = 'Jane';

// 输出结果
console.log(originalArray); // [1, 2, 3]
console.log(deepCopyArray); // [4, 2, 3]
console.log(originalObject); // { name: 'John', age: 30 }
console.log(deepCopyObject); // { name: 'Jane', age: 30 }