浅谈JavaScript中深浅拷贝

为什么会有深浅拷贝？

对于为什么会有深浅拷贝的问题，是由于js中对基本数据类型和引用数据类型的操作方式是不一样的，基本类型指的是简单的数据段，而引用类型指的是一个对象保存在堆内存中的地址。js是不允许我们直接操作内存地址的，所以说我们是不能操作对象的内存空间，我们对对象的操作都只是在操作他的指针而已。

浅拷贝

就是对数组和对象简单的复制和拷贝，主要复制的是引用数据类型的内存地址，因此地址相同的变量，操作引用数据类型彼此也会有影响

• 代码案例

let arr1 = [1,2,3,4,5];
// 这样的语法就是浅拷贝
        // 执行原理:
        // 此时是 赋值 arr1 中 存储的 数组的 内存地址
        // arr2 和 arr1 中存储的是相同的内存地址 ,指向的是一个相同的数组
        // 如果 arr1 或者 arr2 对 这个数组做出修改,都会影响另一个变量的输出

        let arr2 = arr1;

        // 通过arr2,来修改数组,执行之后
        arr2[0] = '北京';

        console.log(arr1);
        console.log(arr2);
        ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200229193850422.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1cGVyX3h4eQ==,size_16,color_FFFFFF,t_70)

深拷贝

完整的复制拷贝 一个引用数据类型中的数值数据,到另一个引用数据类型中，两个变量 是两个的独立的引用数据类型 是两个独立的存储空间，一个变量操作 引用数据类型 不会影响另一个变量

• 代码案例

        // 通过循环遍历,获取 arr3中的所有数值,复制拷贝在arr4中
        // 此时 arr4 与 arr3 虽然数值相同,但是是两个独立的引用数据类型,是两个独立的空间
        // 此时 arr4或者arr3,修改数据,不会对另一个引用数据类型造成影响

        let arr3 = [1,2,3,4,5];

        let arr4 = [];

        arr3.forEach(function(item){
            arr4.push(item);
        })

        arr4[0] = '北京';

        console.log(arr3);
        console.log(arr4);
        ![在这里插入图片描述](https://img-blog.csdnimg.cn/2020022919430292.png)
        

jQuery中提供的实现深浅拷贝的方法

$.extend()方法

1. 语法形式一

$.extend( 是否深拷贝(不写) , 对象1,对象2,对象3…)
执行的是深拷贝

3. 语法形式二

$.extend( 是否深拷贝(true) , 对象1,对象2,对象3…)
执行的是浅拷贝