7.JS之深淺拷貝

1.深拷貝與淺拷貝的區別

如何區分深拷貝與淺拷貝，簡單點來講，就是假設B複製了A，當修改A時，看B是否會發生變化，若是B也跟着變了，說明這是淺拷貝，拿人手短，若是B沒變，那就是深拷貝，自食其力。

2.棧堆、基本數據類型、引用數據類型
棧堆：存放數據的地方
基本數據類型：number,string,boolean,null,undefined.
引用數據類型(Object類)有常規名值對的無序對象{a:1}，數組[1,2,3]，以及函數等。

3.淺拷貝

let a= [0,1,2,3,4],b=a;
console.log(a===b);
a[0] = 1
console.log(a,b)

3.深拷貝

function deepClone(obj){
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
        for(key in obj){
            if(obj.hasOwnProperty(key)){
                //判斷ojb子元素是否爲對象，若是是，遞歸複製
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    //若是不是，簡單複製
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
} 
 
let a=[1,2,3,4],b=deepClone(a);
a[0]=2;
console.log(a,b);

4.引用類型和基本類型棧內存儲

4.1基本類型

4.2引用類型

5.JS中拷貝Array的slice和concat方法

5.1.slice拷貝

var a = [1,2,3];
var b = a.slice(); //slice
console.log(b === a);
a[0] = 4;
console.log(a);
console.log(b);

5.2.concat拷貝

var a = [1,2,3];
var b = a.concat();  //concat
console.log(b === a);
a[0] = 4;
console.log(a);
console.log(b);

看到結果，若是你以爲，這兩個方法是深拷貝，那就恭喜你跳進了坑裏！
來看看有意思的例子吧

var a = [[1,2,3],4,5];
var b = a.slice();
console.log(a === b);
a[0][0] = 6;
console.log(a);
console.log(b);

能夠看到slice和contact對於第一層是深拷貝，但對於多層的時候，是複製的引用，因此是淺拷貝
6.JSON 對象的 parse 和 stringify都是深拷貝

var obj = {name:'cancan',age:23,company : { name : '阿里', address : '杭州'} };
var obj_json = JSON.parse(JSON.stringify(obj));
console.log(obj === obj_json);
obj.company.name = "cancan82";
obj.name = "haha";
console.log(obj);
console.log(obj_json);