JavaScript中浅拷贝的奥秘与实战技巧

人亦已歌

JavaScript中浅拷贝的奥秘与实战技巧

1、简单复制对象的最外层属性，不处理对象更深层次的对象属性，会导致复制对象和原始对象的深层次属性指向同一个内存。

2、如果一个对象改变了内存的地址，就会影响另一个对象。

将对象序列化为JSON字符串，然后通过JSON.parse()将字符串生成新的对象，实现深度复制。

实例

1. let arr = [],
2. obj = {
3. a: 1
4. }
5. for(let i = 0; i < 3; i++) {
6. arr.push(obj)
7. }
8. // 基本变量的值一般都是存在栈内存中，而对象类型的变量的值存储在堆内存中，栈内存存储对应空间地址。基本的数据类型: Number 、Boolean、Undefined、String、Null。
9. console.log(arr) //[{ a: 2 },{ a: 2 },{ a: 2 }] 内存地址被替换指向{a:2}
10. console.log(JSON.parse(JSON.stringify(arr))) //[{ a: 1 },{ a: 1 }]防止重新赋值
11. console.log(obj)//{a:1}
12. //当我们执行obj.a = 2 时，堆内存就有新的对象{a：2}，栈内存的b指向新的空间地址( 指向{a：2} )，而堆内存中原来的{a：1}就会被程序引擎垃圾回收掉，节约内存空间。
13. obj.a = 2
14. console.log(obj)//{a:2}
15. console.log(arr) //[{ a: 2 },{ a: 2 }]
16. console.log("//")
17. // 深拷贝 如果对象的属性值为一般类型（string， number），通过Object.assign({},srcObj)得到的新对象是深拷贝
18. let obj1 = {
19. a: 1,
20. b: 2
21. };
22. let obj2 = Object.assign({}, obj1, {
23. b: 20
24. });
25. console.log('obj1', obj1); // { a: 1, b: 2 }
26. console.log('obj2', obj2); // { a: 1, b: 20 }
27. console.log("//")
28. // 浅拷贝 如果属性值为对象或其它引用类型，通过Object.assign({},srcObj)得到的新对象是浅拷贝
29. obj1 = {
30. a: 1,
31. b: {
32. c: 2,
33. d: 3
34. }
35. };
36. obj2 = Object.assign({}, obj1);
37. obj2.a = 10;
38. obj2.b.c = 20;
39. console.log('obj1', obj1); // { a: 1, b: { c: 20, d: 3 } }
40. console.log("obj2", obj2)//{ a: 10, b: { c: 20, d: 3 }}
41. console.log("//")
42. //Object.assign({})和Object.assign() 里面加与不加{}的区别 ;;
43. var test1 = {
44. a: 'a'
45. },
46. test2 = {
47. b: {
48. c: 1
49. }
50. };
51. // Object.assign({}) 原始对象不会被改变
52. console.log(Object.assign({}, test1, test2)); //合并之后{ a: "a", b: {c:1} }
53. console.log(test1) // {a:'a'}
54. console.log(test2) // {b:{c:1}}
55. // Object.assign() 原始对象会被改变(改变的只是被覆盖的原始对象test2覆盖test1)
56. console.log(Object.assign(test1, test2)); //合并之后{ a: "a", b: {c:1} }
57. console.log(test1) //{ a: "a", b: {c:1} }
58. console.log(test2) // {b:{c:1}}
59. //当替换一下被覆盖的对象test1覆盖test2
60. console.log(Object.assign(test2, test1)); //合并之后{ a: "a", b: {c:1} }
61. console.log(test1) //{ a: "a"}此结果是在上面test2覆盖test1测试注释情况下得到,如果不注释打印得到{ a: "a", b: {c:1} },因为上面test1={ a: "a", b: {c:1} }
62. console.log(test2) // { a: "a", b: {c:1 }}

复制代码

以上就是javascript中浅拷贝的介绍，希望对大家有所帮助。

推荐操作环境：windows7系统、jquery3.2.1版本，DELL G3电脑。