JavaScript中的淺拷貝與深拷貝

簡述

-在面試中經(jīng)常被問到深拷貝(深復(fù)制)和淺拷貝(淺復(fù)制),下面就對其進(jìn)行簡單的說明一下。
-淺拷貝:
在使用JavaScript對數(shù)組進(jìn)行操作的時(shí)候,如果只是簡單的將它賦予其他變量,那么我們只要更改其中的任何一個(gè),然后其他的也會跟著改變,這就導(dǎo)致了問題的發(fā)生。

var arr = ['aa','bb','cc'];
var arr2 = arr;
arr2[0] = '新來的';
console.log(arr);//輸出  '新來的','bb','cc'

由此可見對數(shù)組arr2進(jìn)行修改時(shí),而arr內(nèi)數(shù)據(jù)也會隨之改變。這種直接賦值的方式就是淺拷貝現(xiàn)象。那到底是為什么呢?
因?yàn)镴avaScript存儲對象都是存地址的,所以淺復(fù)制會導(dǎo)致 arr 和 arr2 指向同一塊內(nèi)存地址,大概的示意圖如下。


所以當(dāng)修改arr2中的數(shù)據(jù)時(shí),由于arr也指向此處,所以arr的數(shù)據(jù)也就被“修改了”。
-深拷貝
一般都是開辟一塊新的內(nèi)存地址,將原對象的各個(gè)屬性逐個(gè)復(fù)制出去。如下圖所示:


所以當(dāng)修改arr2中的數(shù)據(jù)時(shí),由于arr與arr2地址不同,所以arr的數(shù)據(jù)還是原來的。

數(shù)組的深拷貝

var arr = ['aa','bb','cc'];
var arr2 = arr.slice(0);
arr2[0] = "新來的";
console.log(arr);//輸出:數(shù)組的原始值:'aa','bb','cc'
console.log(arr2);//輸出:數(shù)組的新值:'新來的','bb','cc'

Json的深拷貝

在這里利用JSON下的兩個(gè)方法來實(shí)現(xiàn)對象的深拷貝。

var json = {a:12,b:5};
var str = JSON.stringify(json);//這里將json內(nèi)的數(shù)據(jù)轉(zhuǎn)換成一個(gè)字符串存起來
var json2 = JSON.parse(str);//這里將字符串的內(nèi)容"還原"成原來的"面目"
console.log(json2);//輸出 {a:12,b:5}

總結(jié)

其實(shí)在js中還有很多方法能進(jìn)行深拷貝,例如利用數(shù)組下的cancat方法;對Json進(jìn)行遍歷然后給新的對象,等等。

補(bǔ)充

謝謝@年輕小子,以上我只考慮了純數(shù)組或者純對象(json串)的情況,當(dāng)互相嵌套時(shí)確實(shí)有問題,經(jīng)過查閱資料找到了一個(gè)函數(shù),與大家分享一下,大家有啥好的方法也歡迎留言,共同進(jìn)步!

        function cloneObject( obj, deep ){
            if ( obj === null || obj === undefined || typeof (obj) !== 'object' ){
                return obj;
            }
            var deep = !!deep;
            var cloned = null;
            if ( obj.constructor === Array ){
                if ( deep === false ) return obj;
                cloned = [];
                for ( var i in obj ){
                    cloned.push( cloneObject( obj[i], deep ) );
                }
                return cloned;
            }
            cloned = {};
            for ( var i in obj ){
                cloned[i] = deep ? cloneObject( obj[i], true ) : obj[i];
            }
            return cloned;
        }
        
        var arr = [1, 3, 5, {a: 5}]
        var newArr =cloneObject(arr,true);
        newArr[3].a = 9
        console.log(arr, newArr)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 值類型與引用類型 談淺拷貝與深拷貝之前,我們需要先理清一個(gè)概念,即值類型與引用類型。 什么是值類型與引用類型?這要...
    franose閱讀 659評論 1 8
  • 本文為轉(zhuǎn)載: 作者:zyydeveloper 鏈接:http://www.itdecent.cn/p/5f776a...
    Buddha_like閱讀 1,012評論 0 2
  • 1、對象拷貝有兩種方式:淺復(fù)制和深復(fù)制。顧名思義,淺復(fù)制,并不拷貝對象本身,僅僅是拷貝指向?qū)ο蟮闹羔?;深?fù)制是直接...
    滴答大閱讀 847評論 0 2
  • 1.背景介紹 什么是棧內(nèi)存和堆內(nèi)存? JavaScript中的變量的存放有有原始值與引用值之分,原始值代表了原始的...
    lx2487閱讀 3,399評論 0 2
  • 我要變得優(yōu)秀,為了能夠和你肩并肩。 人與人之間是存在著差距的,人以群分,物以類聚。我要努力一點(diǎn),和你一起同...
    c米子籽閱讀 499評論 0 0

友情鏈接更多精彩內(nèi)容