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

浅拷贝（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等响应式框架，需要确保复制的对象在响应式系统中保持独立时。
示例：

1. // 浅拷贝示例
2. const obj = { a: 1, b: 2 };
3. const copiedObj = obj; // 直接赋值，两者引用同一对象
4. obj.b=3;
6. const originalObj2 = { a: 1, b: { c: 3 } };
7. const copiedObj2 = { ...originalObj2 }; // 浅拷贝，只复制第一层属性
8. originalObj2.b.c=2;
10. const originalObj3 = { a: 1 };
11. const copiedObj3 = Object.assign({}, originalObj3); // 浅拷贝
13. const originalArray4 = [1, 2, 3];
14. const copiedArray4 = originalArray4.concat(); // 数组的浅拷贝
16. const obj5 = { a: 1 };
17. Vue.set(obj, 'b', 2); // 添加新属性，保持响应性
19. const originalObj6 = { a: 1, b: { c: 3 } };
20. const copiedObj6 = JSON.parse(JSON.stringify(originalObj6)); // 深拷贝
22. // 深拷贝示例
23. const original8 = { a: 1, b: { c: 2 } };
24. const deepCopy8 = JSON.parse(JSON.stringify(original8)); // b 的值被递归复制
27. console.log(JSON.stringify(obj),"=1=",JSON.stringify(copiedObj));
28. console.log(JSON.stringify(originalObj2),"=2=",JSON.stringify(copiedObj2));
29. console.log(JSON.stringify(originalObj3),"=3=",JSON.stringify(copiedObj3));
30. console.log(originalArray4,"=4=",copiedArray4);
32. console.log("5",JSON.stringify(obj5));
34. console.log(JSON.stringify(originalObj6),"=6=",JSON.stringify(copiedObj6));
35. console.log(JSON.stringify(original7),"=7=",JSON.stringify(shallowCopy7));
36. console.log(JSON.stringify(original8),"=8=",JSON.stringify(deepCopy8));

复制代码

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

来源：豆瓜网用户自行投稿发布，如果侵权，请联系站长删除