建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
淺拷貝
在使用JavaScript對(duì)數(shù)組進(jìn)行操作的時(shí)候，如果只是簡(jiǎn)單的將它賦予其他變量，那么我們只要更改其中的任何一個(gè)，然后其他的也會(huì)跟著改變，這就導(dǎo)致了問(wèn)題的發(fā)生
網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)的關(guān)注點(diǎn)不是能為您做些什么網(wǎng)站，而是怎么做網(wǎng)站，有沒(méi)有做好網(wǎng)站，給創(chuàng)新互聯(lián)公司一個(gè)展示的機(jī)會(huì)來(lái)證明自己，這并不會(huì)花費(fèi)您太多時(shí)間，或許會(huì)給您帶來(lái)新的靈感和驚喜。面向用戶(hù)友好，注重用戶(hù)體驗(yàn)，一切以用戶(hù)為中心。
var arr = ['aa','bb','cc'];
var arr2 = arr;
arr2[0] = '新來(lái)的';
console.log(arr);//輸出 '新來(lái)的','bb','cc'
由此可見(jiàn)對(duì)數(shù)組arr2進(jìn)行修改時(shí)，而arr內(nèi)數(shù)據(jù)也會(huì)隨之改變。這種直接賦值的方式就是淺拷貝現(xiàn)象。那到底是為什么呢？
因?yàn)镴avaScript存儲(chǔ)對(duì)象都是存地址的，所以淺復(fù)制會(huì)導(dǎo)致 arr 和 arr2 指向同一塊內(nèi)存地址，大概的示意圖如下。
所以當(dāng)修改arr2中的數(shù)據(jù)時(shí)，由于arr也指向此處，所以arr的數(shù)據(jù)也就被“修改了”。
深拷貝
一般都是開(kāi)辟一塊新的內(nèi)存地址，將原對(duì)象的各個(gè)屬性逐個(gè)復(fù)制出去。如下圖所示
所以當(dāng)修改arr2中的數(shù)據(jù)時(shí)，由于arr與arr2地址不同，所以arr的數(shù)據(jù)還是原來(lái)的。
數(shù)組的深拷貝
var arr = ['aa','bb','cc'];
var arr2 = arr.slice(0);
arr2[0] = "新來(lái)的";
console.log(arr);//輸出:數(shù)組的原始值：'aa','bb','cc'
console.log(arr2);//輸出:數(shù)組的新值：'新來(lái)的','bb','cc'
Json的深拷貝
在這里利用JSON下的兩個(gè)方法來(lái)實(shí)現(xiàn)對(duì)象的深拷貝。
var json = {a:12,b:5};
var str = JSON.stringify(json);//這里將json內(nèi)的數(shù)據(jù)轉(zhuǎn)換成一個(gè)字符串存起來(lái)
var json2 = JSON.parse(str);//這里將字符串的內(nèi)容"還原"成原來(lái)的"面目"
console.log(json2);//輸出 {a:12,b:5}
總結(jié)
其實(shí)在js中還有很多方法能進(jìn)行深拷貝，例如利用數(shù)組下的cancat方法;對(duì)Json進(jìn)行遍歷然后給新的對(duì)象等等。
補(bǔ)充
以上只考慮了純數(shù)組或者純對(duì)象（json串）的情況，當(dāng)互相嵌套時(shí)確實(shí)有問(wèn)題，經(jīng)過(guò)查閱資料找到了一個(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)
網(wǎng)頁(yè)名稱(chēng)：理解JavaScript中的淺拷貝與深拷貝
分享網(wǎng)址：http://www.5511xx.com/article/ccddcji.html
