7.JS之深淺拷貝

dailybird 發(fā)布于2019-08-23 12:01 / 536人閱讀

摘要：深拷貝與淺拷貝的區(qū)別如何區(qū)分深拷貝與淺拷貝，簡單點來說，就是假設(shè)復(fù)制了，當(dāng)修改時，看是否會發(fā)生變化，如果也跟著變了，說明這是淺拷貝，拿人手短，如果沒變，那就是深拷貝，自食其力。

1.深拷貝與淺拷貝的區(qū)別

如何區(qū)分深拷貝與淺拷貝，簡單點來說，就是假設(shè)B復(fù)制了A，當(dāng)修改A時，看B是否會發(fā)生變化，如果B也跟著變了，說明這是淺拷貝，拿人手短，如果B沒變，那就是深拷貝，自食其力。

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

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子元素是否為對象，如果是，遞歸復(fù)制
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    //如果不是，簡單復(fù)制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
} 
 
let a=[1,2,3,4],b=deepClone(a);
a[0]=2;
console.log(a,b);

4.引用類型和基本類型棧內(nèi)存儲

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

看到結(jié)果，如果你覺得，這兩個方法是深拷貝，那就恭喜你跳進了坑里！
來看看有意思的例子吧

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對于第一層是深拷貝，但對于多層的時候，是復(fù)制的引用，所以是淺拷貝
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);