摘要：一篇文章徹底說(shuō)清的深拷貝淺拷貝這篇文章的受眾第一類業(yè)務(wù)需要急需知道如何深拷貝對(duì)象的開(kāi)發(fā)者。這篇文章分享的目的更多還是希望用一篇文章整理清楚深淺拷貝的含義遞歸實(shí)現(xiàn)思路以及小伙伴們?nèi)绻褂昧诉@種黑科技一定要清楚這樣寫的優(yōu)缺點(diǎn)。

第一類,業(yè)務(wù)需要,急需知道如何深拷貝JS對(duì)象的開(kāi)發(fā)者。

第二類,希望扎實(shí)JS基礎(chǔ),將來(lái)好去面試官前秀操作的好學(xué)者。

你只需要一行黑科技代碼就可以實(shí)現(xiàn)深拷貝

var copyObj = {
    name: "ziwei",
    arr : [1,2,3]
}

var targetObj = JSON.parse(JSON.stringify(copyObj))

此時(shí) copyObj.arr !== targetObj.arr  已經(jīng)實(shí)現(xiàn)了深拷貝 

別著急走,利用window.JSON的方法做深拷貝存在2個(gè)缺點(diǎn):

如果你的對(duì)象里有函數(shù),函數(shù)無(wú)法被拷貝下來(lái)

無(wú)法拷貝copyObj對(duì)象原型鏈上的屬性和方法

當(dāng)然,你明確知道他們的缺點(diǎn)后,如果他的缺點(diǎn)對(duì)你的業(yè)務(wù)需求沒(méi)有影響,就可以放心使用了,一行原生代碼就能搞定。

目前我在開(kāi)發(fā)業(yè)務(wù)場(chǎng)景中,大多還真可以忽略上面2個(gè)缺點(diǎn)。往往需要深拷貝的對(duì)象里沒(méi)有函數(shù),也不需要拷貝它原型鏈的屬性。

下面我會(huì)盡可能全面的講解清楚JS里對(duì)象的拷貝,要講清楚拷貝,你需要一點(diǎn)點(diǎn)前置知識(shí)

你需要的前置知識(shí):

理解JS里的引用類型和值類型的區(qū)別,知道Obj存儲(chǔ)的只是引用

對(duì)原型鏈有基本了解

關(guān)于對(duì)象拷貝的全部:

1.深拷貝、淺拷貝是什么

2.深拷貝、淺拷貝在業(yè)務(wù)里的最常見(jiàn)的應(yīng)用場(chǎng)景

3.深拷貝和淺拷貝的實(shí)現(xiàn)方式

4.總結(jié)與建議

我們討論JS對(duì)象深拷貝、淺拷貝的前提

只有對(duì)象里嵌套對(duì)象的情況下,才會(huì)根據(jù)需求討論,我們要深拷貝還是淺拷貝。

比如下面這種對(duì)象

var obj1 = {
    name: "ziwei",
    arr : [1,2,3]
}

因?yàn)?如果是類似這樣{name: "ziwei"},沒(méi)有嵌套對(duì)象的對(duì)象的話,就沒(méi)必要區(qū)分深淺拷貝了。只有在有嵌套的對(duì)象時(shí),深拷貝和淺拷貝才有區(qū)別

淺拷貝是什么樣子的 (我們暫時(shí)不管具體如何實(shí)現(xiàn),因?yàn)橄旅鏁?huì)單講)

調(diào)用shallowCopy()后,obj2拷貝obj1所有的屬性。但是obj2.arr和obj1.arr是不同的引用,指向同一個(gè)內(nèi)存空間

 var obj2 = shallowCopy( obj1 , {})
 
 console.log( obj1 !== obj2 )                   // true    無(wú)論哪種拷貝,obj1和obj2一定都是2個(gè)不同的對(duì)象(內(nèi)存空間不同)
 
 console.log( obj2.arr === obj1.arr )            // true   他們2個(gè)對(duì)象里arr的引用,指向【相同的】?jī)?nèi)存空間
    
    

所以, 2個(gè)obj經(jīng)過(guò)拷貝后,雖然他們屬性相同,也的確是不同的對(duì)象,但他們內(nèi)部的obj都是指向同一個(gè)內(nèi)存空間,這種我們叫淺拷貝

深拷貝是什么樣子的 (我們暫時(shí)不管具體如何實(shí)現(xiàn),因?yàn)橄旅鏁?huì)單講)

調(diào)用deepCopy()后,obj2拷貝obj1所有的屬性,而且obj2.arr和obj1.arr是指向不同的內(nèi)存空間,

2個(gè)obj2除了拷貝了一樣的屬性,沒(méi)有任何其他關(guān)聯(lián)。

 var obj2 = deepCopy( obj1 , {})
 
 console.log( obj1 !== obj2 )                   // true    無(wú)論哪種拷貝,obj1和obj2一定都是2個(gè)不同的對(duì)象(內(nèi)存空間不同)
 
 console.log( obj2.arr === obj1.arr )            // false   他們2個(gè)對(duì)象里arr的引用,指向【不同的】?jī)?nèi)存空間
    
    

所以, 2個(gè)obj經(jīng)過(guò)拷貝后,除了拷貝下來(lái)相同的屬性之外,沒(méi)有任何其他關(guān)聯(lián)的2個(gè)對(duì)象,這種我們叫深拷貝

舉個(gè)栗子,業(yè)務(wù)需求是 : 一個(gè)表格展示商品各種信息,點(diǎn)擊【同意】時(shí),是可以彈出對(duì)話框調(diào)整商品數(shù)量的。

這種業(yè)務(wù)需求下,我們就會(huì)用到對(duì)象的深拷貝。因?yàn)椤旧唐繁砀瘛康膶傩院汀菊{(diào)整商品表格】的屬性幾乎一樣,我們需要拷貝。

下面的偽代碼和圖片就是展示使用淺拷貝存在的問(wèn)題

這樣得到的adjustTableArr和tableArr里,內(nèi)部對(duì)象都是相同的,所以就出現(xiàn)了圖中紅線標(biāo)注的情況,

當(dāng)我們修改【調(diào)整商品表格】里的商品數(shù)量時(shí),【商品表格】也跟著改變了,這并不是我們想要的

// 表格對(duì)象的數(shù)據(jù)結(jié)構(gòu)
var tableArr = [
        {goods_name : "長(zhǎng)袖腰背夾" , code : "M216C239E0864" , num : "2"},
        {goods_name : "長(zhǎng)袖腰背夾" , code : "M216C240B0170" , num : "3"},
        {goods_name : "短塑褲" , code : "M216D241C04106" , num : "3"},
    ]
    
var adjustTableArr = []                  // 調(diào)整表格用的數(shù)組

for (var key in tableArr) {               // 淺拷貝
    adjustTableArr[key] = tableArr[key]
}

而實(shí)際上,我們希望這2個(gè)表格里的數(shù)據(jù)完全獨(dú)立,互不干擾,只有在確認(rèn)調(diào)整之后才刷新商品數(shù)量。

這種情況下我們就可以使用前面說(shuō)的深拷貝的一行黑科技

var adjustTableArr = JSON.parse(JSON.stringify(tableArr))

還記得它的缺陷嗎? 對(duì)象里的函數(shù)無(wú)法被拷貝,原型鏈里的屬性無(wú)法被拷貝。這里就對(duì)業(yè)務(wù)沒(méi)有影響,可以很方便的深拷貝。

其實(shí)JQ里已經(jīng)有$.extend()函數(shù),實(shí)現(xiàn)就是深拷貝和淺拷貝的功能。有興趣的小伙伴也可以看看源碼。

淺拷貝

淺拷貝比較簡(jiǎn)單,就是用for in 循環(huán)賦值

    function shallowCopy(source, target = {}) {
        var key;
        for (key in source) {
            if (source.hasOwnProperty(key)) {        // 意思就是__proto__上面的屬性,我不拷貝
                target[key] = source[key];
            }
        }
        return target;
    }

深拷貝的實(shí)現(xiàn)

深拷貝,就是遍歷那個(gè)被拷貝的對(duì)象

判斷對(duì)象里每一項(xiàng)的數(shù)據(jù)類型

如果不是對(duì)象類型,就直接賦值,如果是對(duì)象類型,就再次調(diào)用deepCopy,遞歸的去賦值。

    function deepCopy(source, target = {}) {
        var key;
        for (key in source) {
            if (source.hasOwnProperty(key)) {                         // 意思就是__proto__上面的屬性,我不拷貝
                if (typeof(source[key]) === "object") {               // 如果這一項(xiàng)是object類型,就遞歸調(diào)用deepCopy
                    target[key] = Array.isArray(source[key]) ? [] : {};
                    deepCopy(source[key], target[key]);
                } else {                                            // 如果不是object類型,就直接賦值拷貝
                    target[key] = source[key];
                }
            }
        }
        return target;
    }

以上的無(wú)論深、淺拷貝,都用了source.hasOwnProperty(key),意思是判斷這一項(xiàng)是否是其自有屬性,是的話才拷貝,不是就不拷貝。

也就是說(shuō)__proto__上面的屬性,我不拷貝。這個(gè)其實(shí)你可以根據(jù)業(yè)務(wù)需求,來(lái)決定加上和這個(gè)條件

(JQ的$.extend()是會(huì)連__proto__上的屬性也拷貝下來(lái)的,但是是直接拷貝到對(duì)象上,而不是放到之前的__proto__上)

雖然大家可能經(jīng)常用框架提供的api來(lái)實(shí)現(xiàn)深拷貝。

這篇文章分享的目的,更多還是希望用一篇文章整理清楚深淺拷貝的含義、遞歸實(shí)現(xiàn)思路,以及小伙伴們?nèi)绻褂昧薐SON.parse()這種黑科技,一定要清楚這樣寫的優(yōu)缺點(diǎn)。

上面的deepCopy方法有漏洞，沒(méi)有考慮source一開(kāi)始就是數(shù)組的情況

下面是一個(gè)修改后版本

function deepCopy( source ) {
    let target = Array.isArray( source ) ? [] : {}
    for ( var k in source ) {
        if ( typeof source[ k ] === "object" ) {
            target[ k ] = deepCopy( source[ k ] )
        } else {
            target[ k ] = source[ k ]
        }
    }
    return target
}