浅拷贝和深拷贝的区别和实现方法

清疚 2022-04-22 13:04 145阅读 0赞

对于这个问题可以从深拷贝和浅拷贝的使用或起源说起。

**1. js变量包含两种不同数据类型的值基本类型和引用类型**

基本类型包括ES6新增的一共是6种，具体如下

string ,number, null ,undefined, boolean ,symbol

引用类型为那些可能由多个值构成的对象，只有一种

object

将一个值赋给变量时，解析器必须先确定这个值是引用类型还是基本类型。  
基本数据类型可以操作保存在变量中的实际的值  
引用类型的值是保存在内存中的值，但是JavaScript不允许直接访问内存中的位置，就是说不能直接操作对象的内存空间。在操作对象时，我们实际上操作的是对象的引用而不是实际的值。

**2. 变量存储方式–栈和堆**

栈：自动分配内存空间，自动释放，里面存放的是基本类型的值和引用类型的地址

堆：动态分配的内存，大小不定，不会自动释放。里面存放引用类型的值。  
![变量存储方式][v2-e79fc1f234a9b78d4241e3187dffa11b_hd.jpg]

**3. 值传递和址传递**

基本类型和引用类型最大的区别就是传值和传址的区别

基本类型采用值传递

var a = 100;
    var b = a;
    b++;
    console.log(a);  //100
    console.log(b);  //101

引用类型则采用址传递，将存放在栈中的地址赋值给变量

var a = [1,2,3];
    var b = a;
    b.push(4);
    console.log(a);  //[1,2,3,4]
    console.log(b);  //[1,2,3,4]

这里我们本意只想给数组b添加一个元素，然而数组a也增加了。  
分析： 由于a和b都是引用类型，采用址传递，赋值的时候是把a的地址赋值给b，即a和b指向同一个地址，而这个地址都指向堆内存中引用类型的值，当b改变这个值的同时，因为a的地址也指向这个值，所以a的值也跟着变化。

要解决上面出现的问题，就是要使用深拷贝或者浅拷贝了。

首先，浅拷贝和深拷贝都只针对于array、object这种复杂对象。

浅拷贝解决就是设置一个新的对象obj2，通过遍历的方式将obj1对象的值一一赋值给obj2对象。

#### 以下为浅拷贝的实现，比较简单，其实就是遍历对象属性的问题 ####

//数组的浅拷贝
    
    var a = [1, 2, 3];
    var b = [];
    for(var i in a) {
    	b[i] = a[i];
    }
    b.push(4);
    console.log(a); // [1,2,3]
    console.log(b); // [1,2,3,4]
    
    
    //对象的浅拷贝
    
    var obj1 = {
    	''a:1,
    	'b':2
    };
    var obj2 = {};
    for (var i in obj1) {
    	obj2[i] = obj[i];
    }
    obj2['c'] = 3;
    
    console.log(obj1); // {a: 1, b: 2  }
    console.log(obj2); // {a:1, b: 2, c: 3 }

但上面的代码只能进行一层拷贝，无法进行深层次的拷贝，封装函数后对数组的嵌套进行测试

结果证明无法进行深层次的拷贝，这个时候我们可以使用深拷贝来完成

#### 以下为实现深拷贝的方法 ####

深拷贝的问题其实可以分解成两个问题，浅拷贝+递归，什么意思呢？  
看下面三个实现方法

1.  用for…in实现遍历和复制

1.  JSON方法实现

1.  利用数组的Array.prototype.forEach进copy

[v2-e79fc1f234a9b78d4241e3187dffa11b_hd.jpg]: /images/20220422/7f733ececf874319876d75213890ccd1.png