詳細分析JavaScript中的深淺拷貝
在說JS中深淺拷貝之前,我們需要對JS中的資料型別有所瞭解,分為基本資料型別與引用資料型別,對於基本資料型別並沒有深淺拷貝的說法,深淺拷貝主要針對引用資料型別。
一、淺拷貝
淺拷貝只複製了引用,並沒有複製值。在JS中最簡單的淺拷貝就是利用“=”賦值操作符來實現。
var obj1 = { a:1,b:[2,3,4],c:{name:'tanj'},fun:function(){ console.log('fun') } } var obj2 = obj1 obj2.a = 666 /* 修改obj2的值,obj1的值也隨之改變 */ console.log(obj1) /* {a: 666,b: Array(3),c: {…},fun: ƒ} */
上述程式碼中,我們修改obj2的值,obj1的值也隨之發生了改變,使用”=“只實現了淺拷貝。
二、深拷貝
深拷貝是對目標的完全拷貝,進行深拷貝後的兩個值互不影響。
1. 利用JSON.stringify與JSON.parse方法
JSON.stringify將一個JavaScript值轉換為JSON字串;
JSON.parse將一個JSON字串轉換為JavaScript值。
var obj1 = { a:1,} var obj2 = JSON.parse(JSON.stringify(obj1)) obj2.a = 12 console.log(obj1) /* {a: 1,c: {…}} */
修改obj2的值並沒有影響到obj1中的屬性值,顯然,我們利用JSON.parse與JSON.stringify實現了深拷貝。
但是,真的可以這麼簡單的實現嗎?我們來看看下面的例子!
var obj1 = { a:1,fun:function(){ console.log('fun') } } var obj2 = JSON.parse(JSON.stringify(obj1)) obj2.a = 12 console.log(obj1) /* {a: 1,fun: ƒ} */ console.log(obj2) /* {a: 12,c: {…}} */
轉換後的obj2中沒有了fun這個屬性,這是由於在利用JSON.stringify轉換過程中,忽略了undefined、function、symbol。顯然,當我們的物件中出現這些型別的屬性時無法利用該方法實現深拷貝。
2. 遞迴
function deepClone(source){ if(!isObject(source)) return source var newObj = source instanceof Array? []:{} for(let key in source){ if(source.hasOwnProperty(key)){ newObj[key] = isObject(source[key])?deepClone(source[key]):source[key] } } return newObj } function isObject(x) { return typeof x === 'object' && x != null }
測試一下上述方法:
var obj1 = { a:1,fun:function(){ console.log('fun') } } var obj2 = deepClone(obj1) obj2.a = 12 console.log(obj1) /* {a: 1,fun: ƒ} */
通過例子可以看到,我們修改了obj2中a屬性的值,但是並沒有影響到obj1中的a屬性值。通過遞迴我們可以實現深拷貝!
注意:上述方法未解決迴圈引用的問題。
var obj1 = {} obj1.a = obj1 var obj2 = deepClone(obj1) /* 報錯,棧溢位 */ console.log(obj2)
關於如何解決迴圈引用問題以及實現Symbol型別拷貝,稍後完善。
三、其他拷貝方法
1. 陣列中的concat()和slice()方法
我們知道陣列中有兩個方法concat和slice可以完成複製陣列,並且返回新陣列。以concat為例。
var arr = [1,2,3] var arr2 = arr.concat() arr2[2]=4 console.log(arr) /* [1,3] */ console.log(arr2) /* [1,4] */
改變arr2的值,並沒有影響到arr的值,這是實現了陣列的深拷貝嗎,先不急於下結論,一起看看下面的例子再來分析:
var arr = [1,[4,5,6],{a:7}] var arr2 = arr.concat() arr2[3] = 444 arr2[4].a=8 console.log(arr) /* [1,{a:8}] */ console.log(arr2) /* [1,444,{a:8}] */
我們直接修改arr2[3],並沒有引起arr的改變,但是我們修改arr2[4].a時,arr中的相應元素跟著一起發生了改變。其實,我們對arr2陣列中的元素直接進行改變(比如:arr2[0]=***,arr2[1]=***,arr2[3]=***)時,不會影響到原陣列arr,但是我們修改陣列中的[3,4,5]或{a:7}時,會造成原陣列arr的改變。
結論:concat()方法對陣列第一層進行了深拷貝。
可以再試試陣列的slice()方法,它也是隻對陣列第一層進行了深拷貝。
2. Object.assign()和...展開運算子
var obj1 = { a:1,c:{name:'tanj'} } var obj2 = {...obj1} obj2.a = 666 obj2.c.name = 'xinxin' console.log(obj1) /* {a:1,c:{name:'xinxin'}} */
可以看到利用...展開運算子實現的是物件第一層的深拷貝。後面的只是拷貝的引用值。
可以試試Object.assign()方法:
var obj1 = { a:1,c:{name:'tanj'} } var obj2 = {} Object.assign(obj2,obj1) obj2.a = 666 obj2.b[0] = 0 console.log(obj1) /* {a:1,b:[0,c:{name:'tanj'} */
同樣,只對物件第一層進行了深拷貝,假如源物件的屬性值(例如obj1)是一個指向物件的引用,obj2也只拷貝那個引用值。所以改變obj2中b所指向的那個陣列時,obj1的值也會發生改變。
我們可以自己實現一個這樣的效果,只對第一層進行深拷貝:
function shallowClone(source) { const newObj = source.constructor === Array ? [] : {} for (let keys in source) { if (source.hasOwnProperty(keys)) { newObj[keys] = source[keys] } } return newObj }
以上就是分析JavaScript中的深淺拷貝的詳細內容,更多關於JavaScript 深淺拷貝的資料請關注我們其它相關文章!