您好,登錄后才能下訂單哦!
本篇文章給大家分享的是有關如何理解JavaScript中的淺拷貝與深拷貝,小編覺得挺實用的,因此分享給大家學習,希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。
淺拷貝
在使用JavaScript對數組進行操作的時候,如果只是簡單的將它賦予其他變量,那么我們只要更改其中的任何一個,然后其他的也會跟著改變,這就導致了問題的發生
var arr = ['aa','bb','cc'];
var arr2 = arr;
arr2[0] = '新來的';
console.log(arr);//輸出 '新來的','bb','cc'
由此可見對數組arr2進行修改時,而arr內數據也會隨之改變。這種直接賦值的方式就是淺拷貝現象。那到底是為什么呢?
因為JavaScript存儲對象都是存地址的,所以淺復制會導致 arr 和 arr2 指向同一塊內存地址,大概的示意圖如下。
所以當修改arr2中的數據時,由于arr也指向此處,所以arr的數據也就被“修改了”。
深拷貝
一般都是開辟一塊新的內存地址,將原對象的各個屬性逐個復制出去。如下圖所示
所以當修改arr2中的數據時,由于arr與arr2地址不同,所以arr的數據還是原來的。
數組的深拷貝
var arr = ['aa','bb','cc'];
var arr2 = arr.slice(0);
arr2[0] = "新來的";
console.log(arr);//輸出:數組的原始值:'aa','bb','cc'
console.log(arr2);//輸出:數組的新值:'新來的','bb','cc'
Json的深拷貝
在這里利用JSON下的兩個方法來實現對象的深拷貝。
var json = {a:12,b:5};
var str = JSON.stringify(json);//這里將json內的數據轉換成一個字符串存起來
var json2 = JSON.parse(str);//這里將字符串的內容"還原"成原來的"面目"
console.log(json2);//輸出 {a:12,b:5}
總結
其實在js中還有很多方法能進行深拷貝,例如利用數組下的cancat方法;對Json進行遍歷然后給新的對象等等。
補充
以上只考慮了純數組或者純對象(json串)的情況,當互相嵌套時確實有問題,經過查閱資料找到了一個函數
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中的淺拷貝與深拷貝,小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。