浅拷贝和深拷贝两种不同的对象复制

浅拷贝（Shallow Copy）和深拷贝（Deep Copy）是两种不同的对象复制方法，它们在JavaScript中用于创建对象的副本。理解它们的区别和使用场景非常重要，尤其是在处理复杂的数据结构时。

浅拷贝与深拷贝的区别：

1. 浅拷贝：
创建一个新对象，只复制原始对象的第一层属性。
如果属性值是基本数据类型，如`Number`、`String`、`Boolean`，则复制的是值。
如果属性值是引用类型，如`Object`、`Array`，则复制的是引用（指针），而不是值的副本。

2. 深拷贝：
创建一个新对象，递归复制所有层级的属性。
无论属性值是基本数据类型还是引用类型，都会创建一个完全独立的副本。

如何使用：

浅拷贝：
使用对象展开操作符（`...`）。
使用`Object.assign()`方法。
使用数组的`slice()`方法（仅适用于数组）。

深拷贝：
使用`JSON.parse(JSON.stringify(object))`方法。
使用第三方库，如`lodash`的`_.cloneDeep()`方法。
对于复杂的对象，可能需要编写递归函数来实现深拷贝。

使用场景：

1. 适合浅拷贝的场景：
当对象属性都是基本数据类型时。
当对象属性包含引用类型，但不需要修改或不担心修改会影响原始对象时。
需要快速复制对象的第一层属性，且不关心深层嵌套对象的独立性时。

2. 适合深拷贝的场景：
当对象属性包含深层嵌套的引用类型，且需要完全独立的副本时。
当需要修改复制的对象，而不希望这些修改影响到原始对象时。
当使用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`来确保响应性。

根据具体需求和场景，选择合适的拷贝方法来确保数据的独立性和响应性。

如有帮助希望点个推荐；如果没帮助到或者内容有错误，可以下面留言，谢谢！