JS中深拷貝與淺拷貝

ranwu 發(fā)布于2019-08-23 15:41 / 2184人閱讀

摘要：地址傳遞引用類型則是地址傳遞，將存放在棧內(nèi)存中的地址賦值給接收的變量。即對(duì)象的淺拷貝會(huì)對(duì)主對(duì)象進(jìn)行拷貝，但不會(huì)復(fù)制主對(duì)象里面的對(duì)象。

相關(guān)知識(shí)點(diǎn)

1.javascript變量包含兩種不同數(shù)據(jù)類型的值：基本類型和引用類型。

基本類型值指的是簡單的數(shù)據(jù)段，包括es6里面新增的一共是有6種，具體如下：number、string、boolean、null、undefined、symbol。

引用類型值指那些可能由多個(gè)值構(gòu)成的對(duì)象，只有一種如下：object。
在將一個(gè)值賦給變量時(shí)，解析器必須確定這個(gè)值是基本類型值還是引用類型值。

2.javascript的變量的存儲(chǔ)方式：棧（stack）和堆（heap）。

棧：自動(dòng)分配內(nèi)存空間，系統(tǒng)自動(dòng)釋放，里面存放的是基本類型的值和引用類型的地址

堆：動(dòng)態(tài)分配的內(nèi)存，大小不定，也不會(huì)自動(dòng)釋放。里面存放引用類型的值。

基本數(shù)據(jù)類型是按值訪問的，因?yàn)榭梢圆僮鞅４嬖谧兞恐械膶?shí)際的值。
引用類型的值是保存在內(nèi)存中的對(duì)象。JavaScript 不允許直接訪問內(nèi)存中的位置，也就是說不能直接操作對(duì)象的內(nèi)存空間。在操作對(duì)象時(shí)，實(shí)際上是在操作對(duì)象的引用而不是實(shí)際的對(duì)象。

基本類型與引用類型最大的區(qū)別實(shí)際就是傳值與傳址的區(qū)別

值傳遞：基本類型采用的是值傳遞。
地址傳遞：引用類型則是地址傳遞，將存放在棧內(nèi)存中的地址賦值給接收的變量。

淺拷貝

被復(fù)制對(duì)象的所有變量都含有與原來的對(duì)象相同的值，而所有的對(duì)其他對(duì)象的引用仍然指向原來的對(duì)象。即對(duì)象的淺拷貝會(huì)對(duì)“主”對(duì)象進(jìn)行拷貝，但不會(huì)復(fù)制主對(duì)象里面的對(duì)象?！崩锩娴膶?duì)象“會(huì)在原來的對(duì)象和它的副本之間共享。

基本數(shù)據(jù)類型Number(賦值操作)

let a=1;
let b=a;
    b           //1
    b=2;
    b          //2
    a          //1

數(shù)組

let arr1 = [1,2,3];
let arr2 = arr1;
    arr2         //[1,2,3]
    arr2.push(4);
    arr2         //[1,2,3,4]
    arr1         //[1,2,3,4]

首先棧內(nèi)存arr1會(huì)指向堆內(nèi)存里的數(shù)組，棧內(nèi)存的arr1保存的是數(shù)組的引用，也就相當(dāng)于內(nèi)存地址，arr2=arr1,會(huì)把a(bǔ)rr1的引用賦給arr2，所以arr2也有了數(shù)組的引用，此時(shí)arr1和arr2指向的是同一個(gè)數(shù)組，因此一個(gè)數(shù)組的改變會(huì)影響另一個(gè)數(shù)組的值。

對(duì)象

let obj1={count:1,name:"grace",age:1};
let obj2 = obj1;
    obj2        //{count:1,name:"grace",age:1}
    obj2.count=2;
    obj1        //{count:2,name:"grace",age:1}
    obj2        //{count:2,name:"grace",age:1}

綜上所述，如果是基本數(shù)據(jù)類型，直接進(jìn)行賦值操作，這樣就相當(dāng)于在棧內(nèi)存中重新開辟了一個(gè)新的空間把值傳遞過去；如果是引用類型的值傳遞，進(jìn)行的就是淺拷貝，淺拷貝賦值的只是對(duì)象的引用，如上述obj2=obj1，實(shí)際上傳遞的只是obj1的內(nèi)存地址，所以obj2和obj1指向的是同一個(gè)內(nèi)存地址，所以這個(gè)內(nèi)存地址中值的改變對(duì)obj1和obj2都有影響。

深拷貝

深拷貝不僅將原對(duì)象的各個(gè)屬性逐個(gè)復(fù)制出去，而且將原對(duì)象各個(gè)屬性所包含的對(duì)象也依次采用深復(fù)制的方法遞歸復(fù)制到新對(duì)象上,所以對(duì)一個(gè)對(duì)象的修改并不會(huì)影響另一個(gè)對(duì)象。

數(shù)組

法一：for循環(huán)

let arr1 = [1,2,3];
let arr2 = copyArr(arr1);
function copyArr(arr){
    let res=[];
    for(let i=0,length=arr.length;i
法二： slice 
用數(shù)組自身的方法，slice、concat方法在運(yùn)行后會(huì)返回新的數(shù)組
let arr1 = [1,2,3];
let arr2 = arr1.slice(0);

法三： concat
let arr1 = [1,2,3];
let arr2 = arr1.concat();

法四：擴(kuò)展運(yùn)算符
let arr1 = [1,2,3];
let [...arr2] = arr1;


法五：Array.from 
如果參數(shù)是一個(gè)真正的數(shù)組，Array.from會(huì)返回一個(gè)一模一樣的新數(shù)組
let arr1 = [1,2,3];
let arr2 = Array.from(arr1);
對(duì)象
法一：for循環(huán)
let obj1={count:1,name:"grace",age:1};
let obj2 = copyObj(obj){
    let res = {};
    for(let key in obj){
      res[key]=obj[key];
    }
    return res;

}


法二：利用JSON
let obj1={count:1,name:"grace",age:1};
let obj2 = JSON.parse(JSON.stringify(obj1));


//使用JSON比較簡單，但是JSON的深拷貝方式會(huì)忽略函數(shù)對(duì)象和原型對(duì)象(有待考證)
法三：擴(kuò)展運(yùn)算符
 let obj1={count:1,name:"grace",age:1};
 let {...obj2} = obj1;


合成版，可以實(shí)現(xiàn)數(shù)組和對(duì)象的深拷貝
 function deepCopy(obj){
        let result = Array.isArray(obj)?[]:{};  
        if(obj && typeof obj === "object"){ 
            for(let key in obj){
                if(obj.hasOwnProperty(key)){
                    if(obj[key]&&typeof obj[key]==="object"){
                        result[key]=deepCopy(obj[key]);
                    }else{
                        result[key]=obj[key];
                    }
                }
            }
        }
        return result;
    }


注意:ES6新增了Object.assign() 方法 
第一個(gè)參數(shù)是目標(biāo)對(duì)象，之后還可以跟一個(gè)或多個(gè)源對(duì)象。它會(huì)遍歷一個(gè)或多個(gè)源對(duì)象可枚舉的自有鍵并把它們復(fù)制到目標(biāo)對(duì)象，最后返回目標(biāo)對(duì)象 
assign是使用=操作符來賦值，
Object.assign() 只是一級(jí)屬性復(fù)制，比淺拷貝多深拷貝了一層而已。用的時(shí)候，還是要注意這個(gè)問題的

作者：優(yōu)雅1217 
來源：CSDN 
原文：https://blog.csdn.net/baidu_3...