Bootstrap

JS 深拷贝和浅拷贝

在 JavaScript 中,变量可以存储基本数据类型的值(例如数字、字符串和布尔值),也可以存储引用类型的值(例如对象和数组)。当使用赋值操作符将一个变量的值赋给另一个变量时,有两种方式:浅拷贝和深拷贝。

浅拷贝

浅拷贝是指将引用类型的变量赋值给另一个变量时,新变量只是引用了原始对象或数组的地址,而不是创建了一个新的对象或数组。因此,修改新变量的属性或元素会影响原始对象或数组。
举个例子,假设有以下数组:

const originalArray = [1, 2, { name: 'John' }];

现在我们使用浅拷贝的方式创建一个新数组:

const newArray = originalArray;

这样,newArray 变量将持有 originalArray 数组的引用地址。因此,当我们修改 newArray 数组中的对象属性时,也会修改 originalArray 数组中相应对象的属性:

newArray[2].name = 'Mike';
console.log(originalArray[2].name); // 输出:Mike

深拷贝

深拷贝是指创建一个新的对象或数组,该对象或数组的值与原始对象或数组的值相同,但是它们占用不同的内存地址,因此修改新对象或数组的值不会影响原始对象或数组。

JavaScript 标准库中没有提供深拷贝的方法,但是可以使用 JSON 序列化和反序列化来进行深拷贝:

const originalObject = { name: 'John', age: 30 };
const newObject = JSON.parse(JSON.stringify(originalObject));

在上面的代码中,我们将 originalObject 对象使用 JSON.stringify() 方法序列化为一个 JSON 字符串,然后使用 JSON.parse() 方法将其解析为一个新的对象 newObject。现在,newObject 对象和 originalObject 对象的值相同,但是它们占用不同的内存地址,因此修改 newObject 对象的属性不会影响 originalObject 对象的属性。

需要注意的是,使用 JSON 序列化和反序列化进行深拷贝有一些限制。例如,它无法处理循环引用的情况,也无法处理一些特殊的对象属性,如 Date 对象、RegExp 对象等。此外,使用 JSON 序列化和反序列化进行深拷贝也可能会影响性能,因为它需要将对象序列化为字符串,然后再解析为对象。如果需要进行深拷贝并且需要处理这些限制,可以使用第三方库(例如 Lodash)提供的深拷贝函数。

;