如何理解JavaScript中的淺拷貝與深拷貝

本篇文章給大家分享的是有關(guān)如何理解JavaScript中的淺拷貝與深拷貝，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

 淺拷貝

在使用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ù)

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)

以上就是如何理解JavaScript中的淺拷貝與深拷貝，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。