javaScript浅拷贝、深拷贝

本是古典何须时尚 2022-03-07 13:41 225阅读 0赞

**数据类型**  
js的数据类型有两种：  
1.基本数据类型：数值、字符串、布尔、null、undefined （值类型）  
存放在栈中，所以复制基本数据类型的值是会新开一个栈内存

![clipboard.png][]

2.引用数据类型：对象  
对象引用存放在栈中，对象值存放在堆中，所以复制引用类型复制的是应用地址，而不是引用类型的值

![clipboard.png][clipboard.png 1]

**浅拷贝**  
如果我们要复制对象的所有属性都不是引用类型时，就可以使用浅拷贝，实现方式就是遍历并复制，最后返回新的对象。  
function simpleClone(initalObj) \{

var obj = {};    
          for ( var i in initalObj) {
            obj[i] = initalObj[i];
          }    
          return obj;
        }

**concat**

![clipboard.png][clipboard.png 2]

**slice**

![clipboard.png][clipboard.png 3]

**assign**

![clipboard.png][clipboard.png 4]

**深拷贝**  
深度拷贝就是把父对象拷贝到子对象上，而且两者的内存和以后的操作都互不影响的拷贝！  
1.递归

![clipboard.png][clipboard.png 5]

2.借用JSON对象的parse和stringify  
![clipboard.png][clipboard.png 6]

![clipboard.png][clipboard.png 7]

3.JQ的extend方法。  
$.extend( \[deep \], target, object1 ,\[ objectN \] )

deep表示是否深拷贝，为true为深拷贝，为false，则为浅拷贝

target Object类型 目标对象，其他对象的成员属性将被附加到该对象上。

object1 objectN可选。 Object类型 第一个以及第N个被合并的对象

![clipboard.png][clipboard.png 8]

![clipboard.png][clipboard.png 9]  
jQuery.extend()只复制可枚举的属性，不继承原型链，函数复制引用，内部循环引用不处理。而lodash实现的就更为优秀，它实现了结构化克隆算法。

[clipboard.png]: /images/20220307/3786f1f30acb4b47ace39f800fd9311e.png
[clipboard.png 1]: /images/20220307/3c95b161a9b94917a9e8ef363257183f.png
[clipboard.png 2]: /images/20220307/0384c0103fab479298fcd1715850e8a1.png
[clipboard.png 3]: /images/20220307/64040a631a43486b9e9d776e1e73d594.png
[clipboard.png 4]: /images/20220307/d465f51d15d34b28b84d4f357d24ffff.png
[clipboard.png 5]: /images/20220307/8ec60866c6ca43ce9c89d521940f09ed.png
[clipboard.png 6]: /images/20220307/fae7ca05e58840bfa8564baea6461bc9.png
[clipboard.png 7]: /images/20220307/d377209f8d0d42b99fb778b3258ac2d0.png
[clipboard.png 8]: /images/20220307/f7fa54b41f9647e78dd818e9977e1f75.png
[clipboard.png 9]: /images/20220307/b3aaf284d59a4f82a8aef82a23d0126c.png