从本质上剖析JavaScript中的深拷贝和浅拷贝

前端

2023-11-01 08:16:14

剖析深拷贝与浅拷贝的本质

在JavaScript中，数据类型分为基本数据类型和引用数据类型。基本数据类型包括字符串、数字、布尔值和undefined等，而引用数据类型则包括对象、数组和函数等。

深拷贝是指将一个对象或数组的副本创建到另一个新位置，这两个变量彼此独立，互不影响。浅拷贝则仅仅是将对象的引用复制到另一个变量，两个变量指向同一个内存地址，因此更改其中一个变量的值，另一个变量也会受到影响。

深拷贝的实现方式

深拷贝可以借助递归的方式实现。具体步骤如下：

如果要复制的是基本数据类型，则直接返回其原始值。
如果要复制的是引用数据类型，则创建该类型的新实例，并将原对象中的所有属性复制到新实例中。
如果遇到嵌套的对象或数组，则继续递归调用该函数，直到复制完成所有层级。

浅拷贝的实现方式

浅拷贝的实现方式较为简单，只需要使用赋值操作符(=)即可。但是，需要注意的是，浅拷贝只能复制对象或数组的引用，而无法复制其内部的数据。因此，如果修改浅拷贝后的变量的值，原对象中的数据也会受到影响。

深拷贝和浅拷贝的应用场景

深拷贝和浅拷贝都有其各自的应用场景。一般来说，当需要对对象或数组进行独立的修改时，应该使用深拷贝；而当只需要共享对象或数组的引用时，可以使用浅拷贝。

实例解析

为了更直观地理解深拷贝和浅拷贝的区别，我们来看两个实例：

基本数据类型的深拷贝和浅拷贝

// 基本数据类型：字符串
const str1 = 'hello';
const str2 = str1; // 浅拷贝

str2[0] = 'H'; // 尝试修改str2
console.log(str1); // 输出：hello
console.log(str2); // 输出：Hello

// 基本数据类型：数字
const num1 = 123;
const num2 = num1; // 浅拷贝

num2++; // 尝试修改num2
console.log(num1); // 输出：123
console.log(num2); // 输出：124

在这个实例中，str1和str2都是字符串类型，而num1和num2都是数字类型。使用浅拷贝后，两个变量都指向同一个内存地址。当修改str2或num2时，原变量str1和num1的值也会受到影响。

引用数据类型的深拷贝和浅拷贝

// 引用数据类型：对象
const obj1 = { name: 'John', age: 20 };
const obj2 = obj1; // 浅拷贝

obj2.name = 'Mary'; // 尝试修改obj2
console.log(obj1); // 输出：{ name: 'Mary', age: 20 }
console.log(obj2); // 输出：{ name: 'Mary', age: 20 }

// 引用数据类型：数组
const arr1 = [1, 2, 3];
const arr2 = arr1; // 浅拷贝

arr2.push(4); // 尝试修改arr2
console.log(arr1); // 输出：[1, 2, 3, 4]
console.log(arr2); // 输出：[1, 2, 3, 4]