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);