devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

JS深拷贝、浅拷贝 和 使用场景 详解_js 深拷贝

作者：很楠不爱3 | 2024-02-08 10:29:55

赞

踩

js 深拷贝

目录

一、基本概念

1、ECMAScript 数据类型划分：

2、typeof 运算符的返回值：

3、程序内存操作 栈和堆：

二、浅拷贝与深拷贝

1、浅拷贝：

2、深拷贝：

三、使用场景

1、例如：

2、扩展：

一、基本概念

1、ECMAScript 数据类型划分：

            * 简单类型（基础类型、原始类型）：Number、String、Boolean、Undefined、Symbol(SE6新增的)；

            * 引用类型（复杂类型、复合类型）：Object(Math、Null、Function{ Array、Set、Map、Date、RegExp } )；

2、typeof 运算符的返回值：

            * number、string、boolean、symbol、object、function、undefined；

        其中：  number(Number | NaN | Infinity)、string、boolean(true | false | 1 | 0)、symbol、object（Object | Null | Array）、function(Date | eval | ... )、undefined；

3、程序内存操作 栈和堆：

栈（Stack）与堆（Heap）是开发人员必须面对的两个概念，在理解这两个概念时，需要放到具体的场景下，因为不同场景下，堆与栈代表不同的含义。一般情况下，有两层含义：

（1）内存操作场景下，堆与栈表示两种内存的管理方式；

（2）数据结构场景下，堆与栈表示两种常用的数据结构；

更多关于js栈和堆信息如下：JS堆和栈详解icon-default.png?t=N7T8https://blog.csdn.net/weixin_52691965/article/details/128664283

一文读懂堆与栈的区别_堆和栈的区别icon-default.png?t=N7T8https://blog.csdn.net/K346K346/article/details/80849966/通过堆栈的概念，我们更容易理解代码的一些执行方式。这里说的是在程序内存操作(布局)场景下的栈与堆：

堆栈空间分配区别：

（1）栈（操作系统）：由操作系统自动分配释放存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈；从问速度上来看：存在栈中的数据访问速度快，因为栈中直接存储变量的值。

（2）堆（操作系统）：存储复杂类型（对象），一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收；从问速度上来看：存在堆中的数据访问速度略慢(基本感觉不到)，因为在访问复杂类型数据时，需要先访问栈拿到该堆的存储地址，再在堆中去取数据。

 （1）简单类型的数据在变量中直接存的就是值（栈里面直接开辟一个存储空间，存放的就是其值的本身）。

（2）复杂类型的数据在变量中存的是内存地址（在栈里存放的是地址[十六进制表示] ，这个地址再指向堆里面的数据[真正的对象实例是放到堆里面的]），由于复杂数据类型存储时变量中所存储的是内存地址（引用），因此又叫它引用数据类型。

        从以上两点来看，关于变量在栈与堆中的存放方式，可以总结为：简单数据类型放在栈里面，复杂数据类型放到堆里面的。

在了解JS深拷贝之前，还需要先了解以下2个概念！

传值：

表示传递的是变量所赋的值（就是当一个变量的值 赋给 另一个新变量的时候，新变量修改了值，不会影响原来变量的值）

【简单来说：就是相当于把变量的值 全新的复制了一个份】。

  1. let a = 666;
  2. console.log(a); // 666
  3.  
  4. let b = a;
  5.     a = 888;    // 给变量a重新赋值为888
  6.  
  7. console.log(a); // 888
  8. console.log(b); // 666

 上面代码中，a变量 原来给它赋的初始值是666，然后又将变量a赋给了变量b，最后把变量a又重新赋值为888，可以看到变量b的值还是原来的666！这就是传值（在JS中只对Number、String、Booleanl等基本数据类型有效）

传址：

表示传递的是变量所在的内存地址【内存地址：也就是所谓的指针】因为：堆是传址操作。因此，改变堆的值，所有引用该堆的变量的值都会发生改变（简单来讲：就是当一个变量的值 赋给 另一个新变量的时候，新变量修改了值，那么原来变量的值也会被修改，因为它们是同一个内存地址，所以一改全改）

【简单来说：就是类似给变量起了一个新的名字(别名)，但实际上还是原来的存储空间】。

  1. // 数组
  2. {
  3.     let a = [1, 2, 3];
  4.     console.log(a); // [1, 2, 3]
  5.  
  6.     let b = a;	
  7.     a[0] = 100;
  8.  
  9.     console.log(a); // [100, 2, 3]
  10.     console.log(b); // [100, 2, 3]
  11. }
  12.  
  13. // 对象
  14. {
  15.     let a = {
  16.         name: '小明',
  17.         age: 18,
  18.         hobby: ['学习', '打球', '玩游戏']
  19.     };
  20.  
  21.     let b = a;
  22. 	a.name = '小强';
  23. 	b.age = 16;
  24. 	
  25.     console.log(a); // {name: '小强', age: 16, hobby: ['学习', '打球', '玩游戏']}
  26.     console.log(b); // {name: '小强', age: 16, hobby: ['学习', '打球', '玩游戏']}
  27. }

面代码中，a变量 原来给它赋的初始值是，然后又将变量a赋给了变量b，最后把变量a又重新赋值，可以看到变量b的值也一起被修改了（因为变量a和变量b它们俩都是指向同一个内存空间，自然所存的内容也是一样的，一改全改）！这就是传址（在JS中如Array、Object[Function ...]等复杂类型）

所以：一般情况下：简单(基本)类型赋值是 传值 ！！， 复杂(复合、引用)类型赋值是 传址！！


二、浅拷贝与深拷贝

无论是浅拷贝还是深拷贝，其本质还是赋值，原理就是将复杂类型（在实际应用场景中，主要就是对Object {} 或 Array [] 这两种类型的操作最多），如：多维数组、对象等一层一层的拆开后再一个一个的进行赋值。

1、浅拷贝：

当对某个数据（数组或对象）进行拷贝后，修改新数据（拷贝后的数据）里面第1层的数据是不会影响老数据（被拷贝的数据）的，但是如果还要第2层 或 更深层次的数据（复杂数据类型），它仍然是有关联的，如果修改了新数据，那么老数据也会被修改。

浅拷贝方式1：扩展运算符 ...

  1. // 数组
  2. {
  3.     let a = [1, 2, 3, [4, 5, 6] ];
  4.     console.log(a); // [1, 2, 3, [4, 5, 6] ];
  5.  
  6.     let b = [...a];	// 浅拷贝
  7.  
  8.     a[0] = 100;
  9.     a[3][1] = 500; // 这里还是会影响变量b中的第4个下标[]！！
  10. 	
  11.     console.log('数组浅拷贝', b); // [1, 2, 3, [4, 500, 6]]
  12. }
  13.  
  14. // 对象
  15. {
  16.     let a = {
  17.         name: '小明',
  18.         age: 18,
  19.         hobby: ['学习', '打球', '玩游戏']
  20.     };
  21.  
  22.     let b = {...a}; // 浅拷贝
  23.  
  24. 	a.name = '小强';
  25. 	a.age = 16;
  26.     a.hobby[0] = '研究'; // 这里还是会影响变量b中的hobby！！
  27. 	
  28.     console.log('对象浅拷贝', b); // {name: '小明', age: 18, hobby: ['研究', '打球', '玩游戏']}
  29. }

浅拷贝方式2：对象合并Object.assign()

  1. // 数组
  2. {
  3.     let a = [1, 2, 3, [4, 5, 6] ];
  4.     console.log(a); // [1, 2, 3, [4, 5, 6] ];
  5.  
  6.     let b = Object.assign([], a);	// 浅拷贝
  7.  
  8.     a[0] = 100;
  9.     a[3][1] = 500; // 这里还是会影响变量b中的第4个下标[]！！
  10. 	
  11.     console.log('数组浅拷贝', b); // [1, 2, 3, [4, 500, 6]]
  12. }
  13.  
  14. // 对象
  15. {
  16.     let a = {
  17.         name: '小明',
  18.         age: 18,
  19.         hobby: ['学习', '打球', '玩游戏']
  20.     };
  21.  
  22.     let b = Object.assign([], a); // 浅拷贝
  23.  
  24. 	a.name = '小强';
  25. 	a.age = 16;
  26.     a.hobby[0] = '研究'; // 这里还是会影响变量b中的hobby！！
  27. 	
  28.     console.log('对象浅拷贝', b); // {name: '小明', age: 18, hobby: ['研究', '打球', '玩游戏']}
  29. }

从以上的两个实例中可以看出，浅拷贝只是拷贝了复杂数据类型 数据、对象的第一层，如果是更深层次的数据对象就是拷贝引用。

根据上面浅拷贝的问题，此时：下面的深拷贝就排上用场了。

2、深拷贝：

        * 就是在拷贝数据（数组或对象）时，不管数据对象里面有多少层，是简单 还是 复杂数据类型，只要进行深拷贝后，和老数据（之前被拷贝的数据）就毫无关联，相互独立（重新开辟内存空间），互不影响！在修改新数据，对老数据毫无影响。

        * 作用：打断两个对象或数组之间的引用关系！

        * 原理：在对数组或对象进行拷贝，使用递归循环复制，而每次递归都是开辟一个新的内存地址（指针），所以一般只要不是同一个内存地址，就不会修改其值。

        * 简单来讲：当拷贝一个数据后，和原来的数据就没有任何联系了，因为它们不是同一个指针。

 深拷贝方式1：JSON.parse(JSON.stringify( )) 序列化

该方式最大的缺点就是在对象中不能有循环引用！！

  1. //数组的深拷贝测试
  2. let myArr = ["HTML", ["CSS", "H5", ["html", "head", ["meta", "title", "style"], "body"], "CSS3"], "ES6", "jQuery"]
  3. let newMyArr = JSON.parse(JSON.stringify(myArr));
  4.  
  5. newMyArr[1][2][2][1] = 'TITLE';
  6. console.log('修改前：', myArr);
  7. console.log('修改后：', newMyArr);
  8.  
  9.  
  10.  
  11.  
  12. //数组对象深拷贝测试
  13. let arr = ['H5', 'CSS', { a: 'PHP', b: 'Java', c: ['A', 'B', ['一', 2, '三'], 3, { d: '3D' }] }, 'ES6'];
  14. let nArr = JSON.parse(JSON.stringify(arr));
  15. 			
  16. nArr[2].a = 'Python';		
  17. nArr[2].c[2][0] = '壹壹壹';
  18. console.log('修改前：', arr);
  19. console.log('修改后：', nArr);
  20.  
  21.  
  22.  
  23.  
  24.  
  25. //对象数组深拷贝测试 deepCopy
  26. let obj = { h5: 'H5', cs: 'CSS', back: { a: 'PHP', b: 'Java', c: ['A', 'B', ['一', 2, '三'], 3, { d: '3D' }] }, js: 'ES6', null: null, udf: undefined, fn: function (e) { console.log(666) } };
  27. let nObj = JSON.parse(JSON.stringify(obj));
  28. 			
  29. nObj.back.c[0] = 'AAA';
  30. nObj.back.c[2][0] = '壹';
  31. nObj.back.c[2][2] = '叁';
  32. nObj.fn = function(abc){
  33.     alert(888)
  34. }
  35. console.log('修改前：', obj);
  36. console.log('修改后：', nObj);

深拷贝方式2：deepCopy() 自定义方法

该方式可以完美支持所有复杂类型的深度贝后！！

  1.  
  2.  
  3. //判断是否是数组：
  4. const isArray = (arr) => {
  5.     return Object.prototype.toString.call(arr) === '[object Array]';
  6. };
  7.  
  8.  
  9.  
  10.  
  11. //判断是否是对象：
  12. const isObject = (obj) => {
  13.     return typeof obj === 'object' && obj !== null;
  14. };
  15.  
  16.  
  17.  
  18.  
  19. //数组或对象的深拷贝方法1
  20. const deepCopy = (val) => {
  21.     let oVal = isArray(val) ? [] : {};
  22.     for (let v in val) {
  23.         if (isObject(val[v])) {
  24.             //这里是深拷贝的关键所在（递归调用）
  25.             oVal[v] = deepCopy(val[v]);
  26.         } else {
  27.             oVal[v] = val[v];
  28.         };
  29.     };
  30.     return oVal;
  31. };
  32.  
  33.  
  34.  
  35.  
  36. 			
  37. //数组或对象的深拷贝方法2
  38. const deepCopy2 = (val) => {
  39.     let oVal = Array.isArray(val) ? [] : {};
  40.     for (let v in val) {
  41.         if (val.hasOwnProperty(v)) {
  42.             if ('object' === typeof val[v]) {
  43.                 //这里是深拷贝的关键所在（递归调用）
  44.                 oVal[v] = deepCopy2(val[v]);
  45.             } else {
  46.                 oVal[v] = val[v];
  47.             };
  48.         }
  49.     };
  50.     return oVal;
  51. };
  52.  
  53.  
  54.  
  55.  
  56. //数组的深拷贝测试
  57. let myArr = ["HTML", ["CSS", "H5", ["html", "head", ["meta", "title", "style"], "body"], "CSS3"], "ES6", "jQuery"]
  58. let newMyArr = deepCopy(myArr);
  59.  
  60. newMyArr[1][2][2][1] = 'TITLE';
  61. console.log('修改前：', myArr);
  62. console.log('修改后：', newMyArr);
  63.  
  64.  
  65.  
  66.  
  67. //数组对象深拷贝测试
  68. let arr = ['H5', 'CSS', { a: 'PHP', b: 'Java', c: ['A', 'B', ['一', 2, '三'], 3, { d: '3D' }] }, 'ES6'];
  69. let nArr = deepCopy(arr);
  70. 			
  71. nArr[2].a = 'Python';		
  72. nArr[2].c[2][0] = '壹壹壹';
  73. console.log('修改前：', arr);
  74. console.log('修改后：', nArr);
  75.  
  76.  
  77.  
  78.  
  79.  
  80. //对象数组深拷贝测试 deepCopy
  81. let obj = { h5: 'H5', cs: 'CSS', back: { a: 'PHP', b: 'Java', c: ['A', 'B', ['一', 2, '三'], 3, { d: '3D' }] }, js: 'ES6', null: null, udf: undefined, fn: function (e) { console.log(666) } };
  82. let nObj = deepCopy(obj);
  83. 			
  84. nObj.back.c[0] = 'AAA';
  85. nObj.back.c[2][0] = '壹';
  86. nObj.back.c[2][2] = '叁';
  87. nObj.fn = function(abc){
  88.     alert(888)
  89. }
  90. console.log('修改前：', obj);
  91. console.log('修改后：', nObj);
  92.  
  93.  
  94.  
  95. //对象数组深拷贝测试 deepCopy2
  96. let obj2 = { h5: 'H5', cs: 'CSS', back: { a: 'PHP', b: 'Java', c: ['A', 'B', ['一', 2, '三'], 3, { d: '3D' }] }, js: 'ES6', null: null, udf: undefined, fn: function (e) { console.log(666) } };
  97.  
  98. let nObj2 = deepCopy2(obj);
  99. nObj2.back.c[0] = 'AAA';
  100. nObj2.back.c[2][0] = '壹';
  101. nObj2.back.c[2][2] = '叁';
  102. nObj2.fn = function(abc){
  103.     alert(888)
  104. }
  105. console.log('修改前：', obj2);
  106. console.log('修改后：', nObj2);
  107.  
  108.  
  109.

通过以上测试，无论我们是对数组 还是 对象进行深拷贝后，修改了新的数组 或 对象后，不会对旧的数组或对象进行修改，它们都是相互独立的！

三、使用场景

无论是浅拷贝还是深拷贝，一般都用于操作Object 或 Array之类的复合类型。

1、例如：

比如：想对某个数组 或 对象的值进行修改，但是又想保留原来数组 或 对象的值不被修改！

此时：就可以用深拷贝来创建一个新的数组 或 对象，从而达到操作(修改)新的数组 或 对象时，保留原来数组 或 对象。

2、扩展：

在JS中还有一些原生封装好的浅拷贝方法：

如数组方法：concat()，filter()，slice()，map()等。

它们在修改数组时，不会修改原来的数组，而是返回一个新的数组。

除此以外，在还有一些其他第三方的深拷贝插件：clone-deep

clone-deep - npm (npmjs.com)icon-default.png?t=N7T8https://www.npmjs.com/package/clone-deep

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/68396
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号