當我們利用v-bind:來綁定屬性向子組件傳遞對象的時候,有時候我們需要子組件改變的時候不改變父組件的值,一般可以利用JSON.stringify(JSON.parse(jsonstr))將傳遞來的對象賦值到子組件自己的data,這樣做的原理是對傳過來的值重新賦予一個空間,從而解決雙向綁定。,但是es6有一個深度賦值的方法也可以解決這個問題, let obj= Object.assign({}, obj)也可以解決。
比如一個數組(array)
淺度拷貝是當數組a變量成數組b的時候,b改變裏面的數組數值的時候,a也隨着改變。
淺度拷貝保存了一個指向該對象的指針,所有的操作都是對該引用的操作,所以對對象的修改會影響其他的複製對象。
深度拷貝是噹噹數組a變量成數組b的時候,b改變裏面的數組數值的時候,a裏面的數組數組不隨着改變。
var arr = ["a", "b", "c", "d", "e"]; var Arr = JSON.stringify(arr); //先轉化爲string字符串的類型 var Brr = JSON.parse(Arr); //在解析字符串的類型 Brr[1] = 'h'; //這樣修改Brr中的數組的時候就不會影響到arr裏面數組的值 console.log('arr:' + arr); //結果是arr:a,h,c,d,e console.log("Arr:" + Brr); //結果是Arr:a,h,c,d,e
那麼爲什麼淺度拷貝會改變a的數組值而深度拷貝則不會呢?
因爲淺度拷貝指向的是同一個內存,而深度拷貝是增加了一個新的內存,所以不會影響到原來a的內存, 所 以就不會改變原來的值 eg.
var arr = ["a", "b", "c", "d", "e"]; var Arr = arr; Arr[1] = 'h'; console.log('arr:' + arr); //arr的下標1的‘b’也變成了‘h’ 結果是:arr:a,h,c,d,e console.log("Arr:" + Arr); //結果是:Arr:a,h,c,d,e
數組的深拷貝
對於數組的深拷貝常規的有三種方法:
方法一:遍歷複製
var arr = ["a", "b"], arrCopy = []; for (var item in arr) arrCopy[item] = arr[item]; arrCopy[1] = "c"; arr // => ["a", "b"] arrCopy // => ["a", "c"]
考慮僞多維數組可以寫成函數形式:
function arrDeepCopy(source){ var sourceCopy = []; for (var item in source) sourceCopy[item] = typeof source[item] === 'object' ? arrDeepCopy(source[item]) : source[item]; return sourceCopy; }
這種方法簡單粗暴,但是利用JS本身的函數我們可以更加便捷地實現這個操作。
方法二:slice()
可以參考 W3School 對 slice() 方法的描述:slice() 方法可從已有的數組中返回選定的元素。
調用格式爲:
arrayObject.slice(start,end)
方法返回一個新的數組,包含從 start 到 end (不包括該元素)的 arrayObject 中的元素。該方法並不會修改數組,而是返回一個子數組。
在這裏我們的思路是直接從數組開頭截到尾:
arrCopy = arr.slice(0); arrCopy[1] = "c"; arr // => ["a", "b"] arrCopy // => ["a", "c"] 可以看出成功創建了一份原數組的拷貝。
方法三:concat()
可以參考 W3School 對 concat()
方法的描述: concat()
方法用於連接兩個或多個數組。
調用格式爲: arrayObject.concat(arrayX,arrayX,......,arrayX)
該方法不會改變現有的數組,而僅僅會返回被連接數組的一個副本。
使用這種方法的思路是我們用原數組去拼接一個空內容,放回的便是這個數組的拷貝:
arrCopy = arr.concat(); arrCopy[1] = "c"; arr // => ["a", "b"] arrCopy // => ["a", "c"]
對象的深拷貝
對於數組的深拷貝我們有了概念,那麼一般對象呢?
我們給出一個對象:
var obj = { "a": 1, "b": 2 };
同樣做測試:
var objCopy = obj; objCopy.b = 3; obj // => { "a": 1, "b": 3 } objCopy // => { "a": 1, "b": 3 }
同樣,簡單的賦值運算只是創建了一份淺拷貝。
而對於對象的深拷貝,沒有內置方法可以使用,我們可以自己命名一個函數進行這一操作:
var objDeepCopy = function(source){ var sourceCopy = {}; for (var item in source) sourceCopy[item] = source[item]; return sourceCopy; }
但是對於複雜結構的對象我們發現這個函數並不適用,例如:
var obj = { "a": { "a1": ["a11", "a12"], "a2": 1 }, "b": 2 };
所以需要進行一點修改:
var objDeepCopy = function(source){ var sourceCopy = {}; for (var item in source) sourceCopy[item] = typeof source[item] === 'object' ? objDeepCopy(source[item]) : source[item]; return sourceCopy; } var objCopy = objDeepCopy(obj); objCopy.a.a1[1] = "a13"; obj // => { "a": { "a1": ["a11", "a12"], "a2": 1 }, "b": 2 } objCopy // => { "a": { "a1": ["a11", "a13"], "a2": 1 }, "b": 2 }
3、對象數組的深拷貝
如果再考慮更奇葩更復雜的情況,例如我們定義:
var obj = [{ "a": { "a1": ["a11", "a12"], "a2": 1 }, "b": 2 }, ["c", { "d": 4, "e": 5 }]]; 這是一個由對象、數組雜合成的奇葩數組,雖然我們平時寫程序基本不可能這麼折騰自己,但是可以作爲一種特殊情況來考慮,這樣我們就可以結合之前說的方法去拓展拷貝函數:
var objDeepCopy = function (source) { var sourceCopy = source instanceof Array ? [] : {}; for (var item in source) { sourceCopy[item] = typeof source[item] === 'object' ? objDeepCopy(source[item]) : source[item]; } return sourceCopy; } var objCopy = objDeepCopy(obj); objCopy[0].a.a1[1] = "a13"; objCopy[1][1].e = "6"; obj // => [{ "a": { "a1": ["a11", "a12"], "a2": 1 }, "b": 2 }, ["c", { "d": 4, "e": 5 }]] objCopy // => [{ "a": { "a1": ["a11", "a13"], "a2": 1 }, "b": 2 }, ["c", { "d": 4, "e": 6 }]]