JS 淺拷貝&深拷貝

MD!爲何會出現淺拷貝和深拷貝！
源頭在這兒：
1.js的基本數據類型和引用數據類型
基本類型（簡單的數據段）：number、string、boolean、null、undefined、symbol
引用類型值：指那些可能由多個值構成的對象：object

LOOK!!!

在將一個值賦給變量時，解析器必須肯定這個值是基本類型值仍是引用類型值。
基本數據類型是按值訪問的，由於能夠操做保存在變量中的實際的值。基本數據類型的值不可變，好比字符串

引用類型的值是保存在內存中的對象。與其餘語言不一樣，JavaScript 不容許直接訪問內存中的位置，也就是說不能直接操做對象的內存空間。 在操做對象時，其實是在操做對象的引用而不是實際的對象。

tmd!! 怎麼理解內存空間：javascript的變量的存儲方式--棧（stack）和堆（heap）
棧：自動分配內存空間，系統自動釋放，裏面存放的是基本類型的值和引用類型的地址

堆：動態分配的內存，大小不定，也不會自動釋放。裏面存放引用類型的值。

基本類型與引用類型最大的區別實際就是傳值與傳址的區別
值傳遞：基本類型採用的是值傳遞。

var ccx = 0;
var ccx1 = ccx;  ccx&&ccx1都是基本類型
ccx1++;//不能改變ccx的值
console.log(ccx1 + 'md!' + ccx);//1md!0
複製代碼

址傳遞：引用類型則是地址傳遞，將存放在棧內存中的地址賦值給接收的變量。

var oop1 = [1,2]; 數組是引用類型
var oop2 = oop1;oop1將存在棧中的地址賦值給oop2,oop1和oop2同時指向棧內存地址；
oop2.push(3);
console.log(oop1) //[1,2,3];
console.log(oop2)//[1,2,3];

oop1和oop2的值都同樣；tmd!那怎麼解決他兩個值要不同呢？
就出現了淺拷貝和深拷貝；

1.淺拷貝解決方法：
數組：
var oop1 = [1,2,4];
var oop2 = [];
for (i in oop1) {
    oop2[i] = oop1[i];//進行淺拷貝,解決oop1和oop2值不同
}
oop.push(3);
console.log(oop2)//[1,2,4,3]
console.log(oop)//[1,2,4];

對象：   新var一個對象 將現有的對象的值賦值給新對象
var oop1 = {
    "name1":1,
    "name2":2
}

var oop2 = {};
for (x in oop1) {
    oop2[x] = oop1[x]//將現有的對象的值賦值給新對象
}
oop2.name1 = 11;  //驗證oop2的name1改變是否致使oop1的name1改變
console.log(oop2)//{name1: 1, name2: 2}
console.log(oop1)//{name1: 11, name2: 2}
結果：oop2的改變沒有致使oop1的改變



2.深拷貝解決方法
所謂深拷貝，就是可以實現真正意義上的數組和對象的拷貝，咱們經過遞歸調用  淺拷貝的方式實現。

look!
        var obj1 = {
            fruits: ['apple', 'banner'],
            num: 100
        }
        function deepCopy(obj) {
            var objArray = Array.isArray(obj) ? [] : {};
            if (obj && typeof obj === 'object') {
                for (key in obj) {
                    if (obj.hasOwnProperty(key)) {
                        if (obj[key] && typeof obj[key] === 'object') {
                            objArray[key] = deepCopy(obj[key]);
                        } else {
                            objArray[key] = obj[key];
                        }
                    }
                }
            }
            return objArray; 
        }

        var obj2 = deepCopy(obj1);
        obj2.fruits[0] = 'orange';
        console.log(obj2.fruits[0]); //orange
        console.log(obj1.fruits[0]); //apple


        // jQuery實現方法：
        jQuery.extend([deep], target, object1, [objectN]);

         var obj1 = {
                fruits: ['apple', 'banner'],
                num: 100
            }
            // 第一個參數設置爲true，則jQuery返回一個深層次的副本，遞歸地複製找到的任何對象。
            var obj2  = $.extend(true,{},obj1);
            obj2.fruits[0] = 'orange';
             console.log(obj2.fruits[0]); //orange
            console.log(obj1.fruits[0]); //apple

最簡單的深拷貝：b = JSON.parse( JSON.stringify(a) )
複製代碼