引用数据类型之深浅拷贝篇----不得不说的秘密

最新推荐文章于 2023-02-21 17:29:34 发布

王濤

最新推荐文章于 2023-02-21 17:29:34 发布

阅读量298

点赞数 2

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/Anber_wang/article/details/105018078

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

今天我们说一下数据类型里面的一个小知识点哦！在 JavaScript 中有两种数据类型，分别是 简单数据类型/基本数据类型和引用数据类型。

简单数据类型/基本数据类型 ：布尔类型、数值类型、字符串类型、null、undefind

引用数据类型：数组、函数和对象

         基本数据类型
            赋值的是 存储的数据
            赋值之后 两个变量没有关系

         引用数据类型
            浅拷贝
               直接赋值 赋值的是 内存地址
               赋值之后 两个变量使用的相同内容,一个操作,另一个也会改变
            深拷贝
               循环遍历,获取引用数据类型中,存储的每一个数据信息
               赋值到新的变量中
               赋值之后 两个变量,没有任何关系

大家发现没有，我们的 浅拷贝和深拷贝 只有引用数据类型才有哦！😝😝😝

简单数据类型/基本数据类型

首先我们现说一下基本类型数据的

        // 简单数据类型/基本数据类型

        // 此时 str1 中存储的是 数据 北京
        var str1 = '北京';

        // 将 str1 中存储的数据北京 赋值给 str2 
        var str2 = str1;

        // 之后对str1 的操作,与str2,无关
        str1 = '上海';

        console.log(str1 , str2);

代码的显示图：

有没有发现，有没有发现，有没有发现，重要的事情说三遍🙃🙃🙃！当我们的 str2 被赋值以 str1 后，在对 str1 进行操作时，将在不对 str2 尽行影响。

引用数据类型

浅拷贝

接下来我们先看一个实列讲解

        // arr1 变量中 存储的是 数组的 内存地址
        var arr1 = [1,2,3,4,5];

        // 将arr1 存储的内存地址,赋值给arr2,两个变量存储的是相同的内存地址
        var arr2 = arr1;

        // arr1操作,数组,arr2也会改变
        // 因为arr1和arr2,同时存储的是相同的数据,操作的也是同一个数组
        // 同理,arr2,操作数组,arr1也会改变
        arr1[0] = '北京';

        console.log(arr2);

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

代码显示图：

看见没？因为浅拷贝时，两个数组是共用的一个地址，所以，当我们对这两个中的任何一个数组进行操作时，另外一个都会受到影响。通俗一点儿讲：

有两户人家，分别是 A 户，B 户；他们两家合资打了一口井，两家共用，假如其中一户人家
对这口 井 做点儿什么😈😈😈，那是不是它们两家都要受到影响呢？
在这里，井 就是我们数组的 储存地址哦！

深拷贝

下面是实例讲解时间：

        // 只复制arr3中的数据
        var arr3 = ['北京','上海','广州','重庆','天津'];

        // 循环遍历,获取arr3中的所有数据数值,赋值到新的数组中
        var arr4 = [];

        // 通过循环,生成arr3的所有索引下标
        for(var i = 0 ; i <= arr3.length-1 ; i++){
            // arr3[i] 就是获取 arr3中的 存储的 数据信息
            // arr4.push() 将arr3中的数据 arr3[i] , 写入到 arr4中
            arr4.push(arr3[i]);
        }

        console.log(arr4);

        arr3[0] = '武汉';

        console.log(arr3 , arr4);