JavaScript中的深浅拷贝

本文主要介绍JavaScript中的浅拷贝和深拷贝

1.要理解浅拷贝和深拷贝，首先要理解JavaScript的数据类型，JavaScript的数据类型分为基本数据类型和引用数据类型

基本数据类型：布尔类型、数值类型、字符串类型、undefined、null
引用数据类型：数组、对象、函数

2.我们先来看基本数据类型的赋值操作，这里我们以字符串类型为例

<script>
    var str1 = "abc";//此时str1中存储的是数据abc
    var str2 = str1;//将str1中存储的数值赋值给str2
    str1 += "def";//对str1进行拼接字符串操作
    console.log(str1,str2);
</script>

从结果我们可以看出在完成对str2的赋值之后，对str1的操作并没有对str2发生影响。

3.现在我们来看一下引用数据类型的赋值操作，这里我们以数组为例

<script>
    var arr1 = [1,2,3];//此时arr1中存储的是数组的内存地址
    var arr2 = arr1;//将arr1的内存地址赋值给arr2
    arr1.push(4,5,6);//为arr1新增数据
    console.log(arr1,arr2);
</script>

从结果我们可以看出，对arr1的操作影响了arr2，因为arr1对arr2的赋值是将它的内存地址赋给了arr2，所以它们具有了相同的内存地址，存储的是相同的数据，操作的是同一个数组，所以arr1和arr2的改变都会影响对方。

4.所以这里我们可以总结浅拷贝和深拷贝的概念

浅拷贝:直接将一个引用数据类型的地址,赋值给另一个变量存储
	  两个变量存储的是相同的内存地址,对其中一个操作,另一个也会改变

深拷贝:只复制引用数据类型中的数值，而不是复制内存地址
	  赋值之后两个变量,没有任何关系

5.我们可以通过循环遍历,获取引用数据类型中存储的每一个数据信息，赋值到新的变量中，完成深拷贝，这里我们还是以数组为例

<script>
    var arr1 = [1,2,3];
    var arr2 = [];
    //循环遍历获取arr1数值
    arr1.forEach(function(val){
        arr2.push(val);//将arr1中的数据写入arr2
    })
    console.log(arr1);
    arr1.push(3,4);
    console.log(arr1,arr2);
</script>

从结果我们可以看出在对arr2赋值之后，对arr1的操作，并没有对arr2造成影响，完成了深拷贝。