老生常談之js深拷貝與淺拷貝

2022-03-12 10:17:30 字數 1604 閱讀 4884

經常會在一些**或部落格看到「深轉殖」，「淺轉殖」這兩個名詞，其實這個很好理解，今天我們就在這裡分析一下js深拷貝和淺拷貝。

我們先以乙個例子來說明js淺拷貝：

var n = 


var m = n


m.a = 12


console.log(n.a) // ?
上面顯然n.a的值會變為 12，這就是js淺拷貝。淺拷貝只是拷貝的指向物件的指標，本質上還是指向同乙個物件。

同樣我們還是以乙個例子來說明啥叫js deep clone：

var n = 


var m = 


m.a = 12


console.log(n.a) // ?
上面的輸出結果顯然還是1，m 和 n 雖然所有的屬性和值全部相同，但是它們是兩個不同的物件，它們在堆記憶體中佔據兩塊不同的記憶體位址，這就是深度拷貝。深度拷貝就是完全複製乙個新的物件出來，它們在堆記憶體中完全佔據兩個不同的記憶體位址。

手動直接賦值

上面的 深拷貝 例子

利用 es6object.assign()方法

const obj = 


const newobj = object.assign({}, obj)


obj.name = 'cc1'


newobj.name ? // cc
簡單粗暴的方式：json.parse(json.stringify(obj))。

缺點：它會對對於正規表示式型別、函式型別等無法進行深拷貝，而且會直接丟失相應的值，還有就是它會拋棄物件的constructor。

var obj = , b: 123 }


var newobj = json.parse(json.stringify(obj))


newobj.b = 1234


console.log(obj)   // , b: 123}


console.log(newobj);    // , b: 1234}
利用 jquery

// 淺拷貝


var newobj = $.extend({}, obj)


// 深拷貝


var newobj = $.extend(true, {}, obj) // 要求第乙個引數必須為true
自己動手實現乙個簡單深拷貝函式

function deepclone(obj)


for(let key in obj)      


}  return newobj


}let obj = , c: }


deepclone(obj)  // , c: }
對於深拷貝來說最常用的就是這些方法，當然還有其他的一些庫，比如deepcopy，lodash等，這裡就不深究。

js深拷貝與淺拷貝

1 基礎知識 基本型別與引用型別 js中可以把變數分成兩部分，基本型別和引用型別。基本型別包括 undefined null boolean number和string 引用型別值可能由多個值構成的物件。在對基礎型別資料進行拷貝時，實際相當於建立新的相同資料 hello 賦值給b var a hel...

js 淺拷貝與深拷貝

js 有兩種資料型別，基礎資料型別和引用資料型別 基礎資料型別都是按值訪問的，我們可以直接操作儲存在變數中的實際的值。而引用型別如array，1.淺拷貝 只複製指向某個物件的指標，而不複製物件本身，新舊物件共享一塊記憶體 淺拷貝是指只複製一層物件，當物件的屬性是引用型別時，實質複製的是其引用，當引用...

js深拷貝與淺拷貝

實現乙個頁面或者乙個功能時，常常遇到的場景需要我們備份乙個陣列或者物件，這時候出現了深拷貝與淺拷貝效果截然不同呀總結如下 var arr 1,2,3,4 shallowarr arr arr 0 change console.log arr console.log shallowarr change...