這篇文章帶給大家的內容是關於淺析js中的深拷貝與淺拷貝,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。
關於深拷貝和淺拷貝其實是兩個比較基礎的概念,但是我還是想整理一下,因為裡面有很多小細節還是很有趣的。
深拷貝和淺拷貝是大家常聽到的兩個名詞,兩者到底有什麼不同呢?
先看看什麼是淺拷貝。
var obj1 = { a: 1, b: 2 }; var obj2 = obj1; obj2.a = 3; console.log(obj1); // { a: 3, b: 2 } console.log(obj2); // { a: 3, b: 2 }
這是一個最簡單的淺拷貝的例子,我把obj1賦值給obj2,改變了obj2中的一個屬性值,obj1中的相應屬性值也跟著變化了,這是為什麼呢?
因為淺拷貝其實只是引用的拷貝,兩者還是指向記憶體中的同一個位址。簡而言之,就是obj1和obj2其實指向的是同一個物件。打個比方,就像一個房間把門牌號碼1換成了門牌號碼2,但這個房間還是這個房間。
那深拷貝就是兩者指向不同的記憶體位址,是真正意義上的拷貝。拿上面的房間舉例子,就是你真的重新開了一間房,不是只是換門牌號碼。
Object.assign()是我們常用到的方法,其實這個方法就是淺拷貝。但是它又有一點特殊的地方,就是可以處理第一層的深拷貝。
var obj1 = { a: 1, b: { c: 2 } }; var obj2 = Object.assign({}, obj1); obj2.a = 3; obj2.b.c = 3; console.log(obj1); // { a: 1, b: { c: 3 } } console.log(obj2); // { a: 3, b: { c: 3 } }
看上面的例子,屬性a的值並沒有跟著變,但是屬性b中的c的值跟著變了。
這是最常用的實作深拷貝的方式,直接看例子:
var obj1 = { a: { b: 1 } }; var obj2 = JSON.parse(JSON.stringify(obj1));
這種方法很簡單而且好用,但是有一點點瑕疵,它會拋棄物件的constructor。也就是深拷貝之後,不管這個物件原來的建構子是什麼,在深拷貝之後都會變成Object。
而這個方法能正確處理的物件只有 Number, String, Boolean, Array,也就是那些能夠被JSON直接表示的資料結構。 RegExp物件或function是無法以這種方式深拷貝。
這是我個人目前使用的方法,只需要一行var obj2 = _.cloneDeep(obj1)
就能實現。而且lodash是一個功能很強大的函式庫,提供的方法可靠又簡單,真的是懶人必備.
以上是淺析js中的深拷貝與淺拷貝的詳細內容。更多資訊請關注PHP中文網其他相關文章!