js深拷貝和淺拷貝的區別是什么

區別：淺拷貝是拷貝了對象的引用，當原對象發生變化的時候，拷貝對象也跟着變化；深拷貝是另外申請了一塊內存，內容和原對象一樣，更改原對象，拷貝對象不會發生變化。

本教程操作環境：windows10系統、JavaScript1.8.5版，Dell G3電腦。

淺拷貝：有兩種方式，一種是把一個對象里面的所有的屬性值和方法都復制給另一個對象，另一種是直接把一個對象賦給另一個對象，使得兩個都指向同一個對象。

深拷貝：把一個對象的屬性和方法一個個找出來，在另一個對象中開辟對應的空間，一個個存儲到另一個對象中。

兩者就在於，淺拷貝只是簡單的復制，對對象里面的對象屬性和數組屬性只是復制了地址，並沒有創建新的相同對象或者數組。而深拷貝是完完全全的復制一份，空間大小占用一樣但是位置不同！！

淺拷貝示例：

//淺拷貝:拷貝就是復制,就相當於把一個對象中的所有的內容,復制一份給另一個對象,
        //直接復制,或者說,就是把一個對象的地址給了另一個對象,他們指向相同,兩個對象之間有共同的屬性或者方法,都可以使用
 
        // 第一種：
        var obj1 = {
            age: 10,
            sex: "男",
            car: ["奔馳", "寶馬", "特斯拉", "奧拓"]
        };
        //另一個對象
        var obj2 = {};
 
        //寫一個函數,作用:把一個對象的屬性復制到另一個對象中,淺拷貝
        //把a對象中的所有的屬性復制到對象b中
        function shallowCopy(obj,targetObj){
            for (let key in obj){
                targetObj[key] = obj[key];
            }
        }
        shallowCopy(obj1, obj2);
        console.dir(obj2);//開始的時候這個對象是空對象
        console.dir(obj1);//有屬性
        //change car attribute
        obj1.car.push("奧迪");
        //the car of obj2 change,too.for the point of the car in obj2 is same as the obj1
        console.log(obj2.car);
 
        // 第二種
        var obj3 = obj1;
        console.dir(obj3);

深拷貝示例：

//深拷貝:拷貝還是復制,深:把一個對象中所有的屬性或者方法,一個一個的找到.並且在另一個對象中開辟相應的空間,一個一個的存儲到另一個對象中
 
        var obj1 = {
            age: 10,
            sex: "男",
            car: ["奔馳", "寶馬", "特斯拉", "奧拓"],
            dog: {
                name: "大黃",
                age: 5,
                color: "黑白色"
            }
        };
 
        var obj2 = {};//空對象
        //通過函數實現,把對象a中的所有的數據深拷貝到對象b中
        // use recursion
        function deepCopy(obj,targetObj){
            for (let key in obj){
                let item = obj[key];
                if (item instanceof Array){//if array
                    targetObj[key] = [];
                    deepCopy(item,targetObj[key]);
                }else if (item instanceof Object){//if object
                    targetObj[key] = {};
                    deepCopy(item,targetObj[key]);
                }else {//normal attribute
                    targetObj[key] = obj[key];
                }
            }
        }
        deepCopy(obj1,obj2);
        console.dir(obj1);
        console.dir(obj2);