JS中的淺拷貝和深拷貝

xeblog 發(fā)布于2019-08-21 16:02 / 1018人閱讀

摘要：說明外層數(shù)組拷貝的是實例說明元素拷貝是引用深拷貝在堆中重新分配內(nèi)存，并且把源對象所有屬性都進(jìn)行新建拷貝，拷貝后的對象與原來的對象完全隔離，互不影響。中的方法可以實現(xiàn)深拷貝，源碼原理也是遞歸使用淺拷貝。

1.淺拷貝

當(dāng)把數(shù)組或?qū)ο蠛唵钨x值給其他變量的時候，實際上進(jìn)行的是淺拷貝，淺拷貝是拷貝引用，只是將拷貝后的引用指向同一個對象實例，彼此間的操作還會互相影響。

分為兩種情況：
直接拷貝源對象的引用

var a = { c : 1};
var b = a ;
console.log( a === b);    // true
 a.c = 2 ;
console.log( b.c ); // 2

源對象拷貝實例，但其屬性拷貝引用。

var a = [{ c:1 },{d:2} ];
var b = a.slice( );
console.log( a === b ); // false 說明外層數(shù)組拷貝的是實例
a[0].c = 3;
console.log( b[0].c ); // 3 //說明元素拷貝是引用

2.深拷貝

在堆中重新分配內(nèi)存，并且把源對象所有屬性都進(jìn)行新建拷貝，拷貝后的對象與原來的對象完全隔離，互不影響。
如何實現(xiàn)深拷貝？只要遞歸調(diào)用“淺拷貝”就行了。

function deepCopy( p , c ){
    var c = c || {} ;
    for(var i in p){
        If( typeof p[ i ] === “object” ){
            c[ i ] = ( p[ i ].constructor === Array )? [ ] : { };
            deepCopy(p[ i ], c[ i ]);
        }else{
            c[ i ] = p[ i ];
        }
    }

    return c;
}

jquery中的$.extend( )方法可以實現(xiàn)深拷貝，源碼原理也是遞歸使用淺拷貝。
注意ES6的新方法Object.assign( target , obj )實現(xiàn)的是淺拷貝。

3.javascript判斷對象是否相等 “==“ ,”==="

對象和數(shù)組這種復(fù)雜數(shù)據(jù)類型在判斷是否相等時，判斷的是二者指向的內(nèi)存地址是否一致，并不是以是否有相同的屬性，屬性是否有相同的值為標(biāo)準(zhǔn)。

如，

       var obj1 = {name : ‘Mack’, age : 21};
       var obj2 = {name : ‘Mack’, age : 21};

       console.log(obj1 === obj2); //false
        
       var obj3 = obj1;

       console.log(obj1 === obj3); //true

ES6中的Object.is( )在復(fù)雜數(shù)據(jù)類型的判斷機(jī)制上和 ‘===’ 是一樣的（不同之處只有兩個，一個是 +0和-0，第二個是NaN和其本身）。