JavaScript中的深拷贝浅拷贝

目录

一、概念

1.1 浅拷贝

1.2 深拷贝

二、操作演示

 2.1 浅拷贝

2.1 .1  代码展示

2.1.2  运行结果

2.2  深拷贝

2.2.1  代码展示

2.2.2  运行结果

三、拓展知识 jQuery的深浅拷贝

3.1  jQuery的深浅拷贝

3.2  jQuery的深浅拷贝的拷贝语法

3.2.1  语法一

 3.2.2  语法二

---

一、概念

1.1 浅拷贝

直接复制拷贝数组/对象的内存地址，所有变量存储的是同一个内存地址，操作的是同一个存储空间，任意一个变量的操作都会影响其他变量。

1.2 深拷贝

复制拷贝的是数组/对象的数据数值，本质上执行几次深拷贝就有几个独立的数据类型，存储的是不同的内存地址，操作的是不同的存储空间，一个变量操作引用数据类型对其他变量没有影响，原生JavaScript中 应该使用 递归函数 完成 数组/对象 的 深拷贝。

二、操作演示

 2.1 浅拷贝

2.1 .1  代码展示

    <script>
        // 浅拷贝
        const arr = [1,2,3,5,4,8,12];
        const arr1 = arr;
        // 输出两个数组
        console.log(arr);
        console.log(arr1);
        // 更改arr1中的数据内容
        arr1[0] = "北京"
        // 再次输出内容
        console.log(arr);
        console.log(arr1);
    </script>

2.1.2  运行结果

浅拷贝，复制的是内存地址，操作的是同一个内存地址。

2.2  深拷贝

2.2.1  代码展示

    <script>
        // 深拷贝
        const arr = ["北京","上海","广州","南京","郑州"]
        const arr1 = [];
        // 循环写入内容
        arr.forEach( (item)=> {
            arr1.push(item);
        })
        // 输出数组
        console.log(arr);
        console.log(arr1);
        // 更改arr1的数据数值
        arr1[1] = "新疆";
        // 再次输出
        console.log(arr);
        console.log(arr1);

    </script>

2.2.2  运行结果

三、拓展知识 jQuery的深浅拷贝

3.1  jQuery的深浅拷贝

jQuery中没有封装传统意义上的浅拷贝的函数，jQuery中封装的 $.extend() 默认执行的就是 传统意义上的深拷贝。

3.2  jQuery的深浅拷贝的拷贝语法

3.2.1  语法一

$.extend( 变量 , 原始数组/对象 );
    浅拷贝
        一维数据 深拷贝 多维数据 浅拷贝

代码展示

        const arr = ["北京","上海","广州","南京","郑州",[1,2,3,4]]
        const arr1 = [];
        // jquery 拷贝语法
//         const 变量 = 数组 /对象 ;
// $.extend( 变量 , 原始数组/对象 );
//     浅拷贝
//         一维数据 深拷贝 多维数据 浅拷贝
        $.extend(arr1,arr);
        
        arr1[1] = "新疆";
        arr1[5][1] = "美国";
        console.log(arr);
        console.log(arr1);

运行结果 

 3.2.2  语法二

$.extend( true , 变量 , 原始数组/对象 );
    深拷贝   
        一维数据 多维数据 都是 深拷贝

 代码展示

        const arr = ["北京","上海","广州","南京","郑州",[1,2,3,4]]
        const arr1 = [];
// $.extend( true , 变量 , 原始数组/对象 );
//     深拷贝   
//         一维数据 多维数据 都是 深拷贝
        $.extend(true,arr1,arr);
        
        arr1[1] = "新疆";
        arr1[5][1] = "美国";
        console.log(arr);
        console.log(arr1);

运行结果

 感觉还不错的   _(:з」∠)_  支持博主就点个赞吧~~~