js相关--浅拷贝和深拷贝

Posted 2021-03-13 逝zxq

1、js的数据类型

基本概述：js的数据类型分为两种，分别为基本数据类型和引用数据类型，它们俩的区别在于基本数据类型采用值传递，引用数据类型采用指针形式传递。

如下所示：引用类型通过简单的=进行复制，会影响到原本的变量的值，因为引用的为指针，复制过去也是指针，指向同一个地址。

    <script>
        var obj1 = {
            a: 123,
            b: {
                c: 233
            }
        };
        var obj2 = {};
        obj2 = obj1;
        obj2.a = 111;
        obj2.b = 123;
        console.log(obj1);
        console.log(obj2); //obj1 = obj2 = {a: 111, b: 123}
    </script>

上述简单的复制也被称作：浅拷贝

2、深拷贝

概述：完整的复制一个变量，跟原有变量没有任何关联。

方式一：递归：每一层判断数据类型

    <script>
        function DeepCopy(obj) {
            var return_obj = {};

            for (let key in obj) {
                if (Object.prototype.toString.call(obj[key]) === '[Object Object]') { //判断是否为引用类型
                    return_obj[key] = DeepCopy(obj[key]);
                } else {
                    return_obj[key] = {...obj[key]
                    }; // es6语法
                }

            }
            return return_obj;
        }
        var obj1 = {
            a: 123,
            b: {
                c: 233
            }
        };
        var obj2 = DeepCopy(obj1);
        obj2.a = 0;
        obj2.b = {
            d: 110
        };
        console.log(obj1);
        console.log(obj2);
    </script>

方式二：JSON方法：var obj2 = JSON.parse(JSON.stringify(obj1));通过JSON的两种方法进行深拷贝
方式三：第三方库等（例子：loadash):通过.cloneDeep(obj)的方法