JS中的深浅复制

什么是深浅复制？

• 深复制：把要复制的对象的所引用的全部对象都复制一遍。开辟新空间。

• 浅复制：仅仅复制对象的引用，而不是对象本身。指向同一片空间。

了解数据类型：

• 基本数据类型：简单的数据段。包括：Undefined、Null、Boolean、Number、String。

• 引用数据类型：可能包含多个值的对象。包括：object、array、function、error、date。

    <script type="text/javascript">
        var a = 10;     //Number类型，基本数据类型
        var o = {       //object类型，引用数据类型
            name:"obj";
        }
    </script>

数据类型.png

深浅复制的实现

一、深拷贝的实现

1.数组深拷贝的实现

（1）使用for循环

    <script type="text/javascript">
        var arr1 = [1,2,3,4,5,6];
        var arr2 = [];
        for(var i=0;i<arr1.length;i++){
            arr2[i] = arr1[i];
        }
        arr2[1] = "a";
        console.log(arr1);      //1,2,3,4,5,6
        console.log(arr2);      //1,"a",3,4,5,6
    </script>

（2）使用slice（）方法

    <script type="text/javascript">
        var arr1 = [1,2,3,4,5,6];
        var arr2 = [];
        arr2 = arr1.slice(0);
        arr2[1] = "a";
        console.log(arr1);      //1,2,3,4,5,6
        console.log(arr2);      //1,"a",3,4,5,6
    </script>

（3）使用concat（）方法

    <script type="text/javascript">
        var arr1 = [1,2,3,4,5,6];
        var arr2 = [];
        arr2 = arr1.concat();
        arr2[1] = "a";
        console.log(arr1);      //1,2,3,4,5,6
        console.log(arr2);      //1,"a",3,4,5,6
    </script>

2.对象深拷贝的实现

（1）使用for循环

    <script type="text/javascript">
        var json1 = {
            "name":"John",
            "age" :18,
            "sex" :"male"
        };
        var json2 = {};
        
        for(var i in json1){
            json2[i] = json1[i];
        }
        json2["name"] = "a";
        console.log(json1);     //"name":"John","age" :18,"sex" :"male"
        console.log(json2);     //"name":"a","age" :18,"sex" :"male"
    </script>

（2）使用JSON实现

    <script type="text/javascript">
        var json1 = {
            "name":"John",
            "age" :18,
            "sex" :"male"
        };
        var json2 = {};
        
        json2 = JSON.parse(JSON.stringify(json1));
        json2["name"] = "a";
        console.log(json1);     //"name":"John","age" :18,"sex" :"male"
        console.log(json2);     //"name":"a","age" :18,"sex" :"male"
    </script>

（3）使用Object.create()的方法

    <script type="text/javascript">
        function Person(){
        }
        Person.prototype.name = "Tom";
        Person.prototype.age = 24;
        Person.prototype.job = "Teacher";
        
        function P(){};
        P.prototype = Object.create(Person.prototype);
        var p1 = new P();
        var p2 = new P();
        p1.name = "kity";
        console.log(p1.name);                   //Kity
        console.log(p2.name);                   //Tom
    </script>

（4）使用call（）方法

    <script type="text/javascript">
        function Person(){
            this.name = "Tom";
            this.age = 24;
            this.job = "Teacher";
            this.friend = ["Jhon","lady"];
        }
        function P(){
            Person.call(this);
        };
        var p1 = new P();
        var p2 = new P();
        p1.friend.push("kity");
        console.log(p1.friend);                 //"Jhon","lady","kity"
        console.log(p2.friend);                 //"Jhon","lady"
    </script>

（5）使用jQuery.extend()的方法

    <script src="jquery.min.js"></script>
    <script type="text/javascript">
        var json1 = {
            "name":"John",
            "age" :18,
            "sex" :"male"
        };
        var json2 = {};
        $.extend(json2,json1)
        json2["name"] = "a";
        console.log(json1);     //"name":"John","age" :18,"sex" :"male"
        console.log(json2);     //"name":"a","age" :18,"sex" :"male"
    </script>

二、浅复制的实现

（1）简单的复制语句

    <script type="text/javascript">
        var arr1 =[10];
        var arr2 = arr1;
        arr2.push(20);
        console.log(arr1);    //10,20
        console.log(arr2);    //10,20
    </script>

（2）使用Object.assign()方法

    <script type="text/javascript">
        var obj1 ={
            a:{"name":"Jhon",
            "age" :18}
        };
        var obj2 = Object.assign({}, obj1);
        obj2.a.name = "a";
        console.log(obj1.a.name);       //"a"
        console.log(obj2.a.name);       //"a"
    </script>