浅拷贝(Shallow Copy)和深拷贝(Deep Copy)是两种不同的对象复制方法,它们在JavaScript中用于创建对象的副本。理解它们的区别和使用场景非常重要,尤其是在处理复杂的数据结构时。
浅拷贝与深拷贝的区别:
- 浅拷贝:
创建一个新对象,只复制原始对象的第一层属性。
如果属性值是基本数据类型,如`Number`、`String`、`Boolean`,则复制的是值。
如果属性值是引用类型,如`Object`、`Array`,则复制的是引用(指针),而不是值的副本。
- 深拷贝:
创建一个新对象,递归复制所有层级的属性。
无论属性值是基本数据类型还是引用类型,都会创建一个完全独立的副本。
如何使用:
浅拷贝:
使用对象展开操作符(`...`)。
使用`Object.assign()`方法。
使用数组的`slice()`方法(仅适用于数组)。
深拷贝:
使用`JSON.parse(JSON.stringify(object))`方法。
使用第三方库,如`lodash`的`_.cloneDeep()`方法。
对于复杂的对象,可能需要编写递归函数来实现深拷贝。
使用场景:
- 适合浅拷贝的场景:
当对象属性都是基本数据类型时。
当对象属性包含引用类型,但不需要修改或不担心修改会影响原始对象时。
需要快速复制对象的第一层属性,且不关心深层嵌套对象的独立性时。
- 适合深拷贝的场景:
当对象属性包含深层嵌套的引用类型,且需要完全独立的副本时。
当需要修改复制的对象,而不希望这些修改影响到原始对象时。
当使用Vue等响应式框架,需要确保复制的对象在响应式系统中保持独立时。
示例:
// 浅拷贝示例
const obj = { a: 1, b: 2 };
const copiedObj = obj; // 直接赋值,两者引用同一对象
obj.b=3;
const originalObj2 = { a: 1, b: { c: 3 } };
const copiedObj2 = { ...originalObj2 }; // 浅拷贝,只复制第一层属性
originalObj2.b.c=2;
const originalObj3 = { a: 1 };
const copiedObj3 = Object.assign({}, originalObj3); // 浅拷贝
const originalArray4 = [1, 2, 3];
const copiedArray4 = originalArray4.concat(); // 数组的浅拷贝
const obj5 = { a: 1 };
Vue.set(obj, 'b', 2); // 添加新属性,保持响应性
const originalObj6 = { a: 1, b: { c: 3 } };
const copiedObj6 = JSON.parse(JSON.stringify(originalObj6)); // 深拷贝
// 深拷贝示例
const original8 = { a: 1, b: { c: 2 } };
const deepCopy8 = JSON.parse(JSON.stringify(original8)); // b 的值被递归复制
console.log(JSON.stringify(obj),"=1=",JSON.stringify(copiedObj));
console.log(JSON.stringify(originalObj2),"=2=",JSON.stringify(copiedObj2));
console.log(JSON.stringify(originalObj3),"=3=",JSON.stringify(copiedObj3));
console.log(originalArray4,"=4=",copiedArray4);
console.log("5",JSON.stringify(obj5));
console.log(JSON.stringify(originalObj6),"=6=",JSON.stringify(copiedObj6));
console.log(JSON.stringify(original7),"=7=",JSON.stringify(shallowCopy7));
console.log(JSON.stringify(original8),"=8=",JSON.stringify(deepCopy8));

注意事项:
浅拷贝不会递归复制对象的深层属性,因此如果原始对象的深层属性被修改,浅拷贝的对象也会受到影响。
深拷贝虽然可以创建完全独立的副本,但使用`JSON.parse(JSON.stringify(object))`方法时,不能复制函数、undefined、循环引用等。
在Vue 3中,由于使用了Proxy,直接赋值通常可以保持响应性,但在Vue 2中,直接赋值可能需要使用`Vue.set`来确保响应性。
根据具体需求和场景,选择合适的拷贝方法来确保数据的独立性和响应性。