深拷貝和淺拷貝的那些事！

工做中一位同事大姐遇到了難題，我打眼一看是由於沒有深拷貝的緣由，三下五除二給她解決了，廢話很少說，開始擼代碼。

代碼展現：

基本業務：新數組push多個對象，給多個對象添加寬度。

var newArr = [];
var newArrTrue = [];
var newArrTrue1 = [];
var spaceColumn = {
    title: '',
    halign: "center",
    align: "center",
    sortable: false,
    width:""
};
var columnWidth = [100,300,110,180,120];
for(var i=0; i<columnWidth.length; i++){
    newArr.push(spaceColumn);
    newArr[i].width = columnWidth[i];
}
console.log(newArr)

複製代碼

結果展現：

解析：

顯然每一次循環都會覆蓋前一個值，最後循環完了也就是把最後一個120非給了width；

緣由：其實計算機在聲明變量的時候都會在內存中開闢一個空間地址去存儲這個變量，

每次循環push的時候其實只是拿到了那個值，真正的空間地址沒有被拷貝出來，每次循環都是在原有的地址上賦值，因此最後一個賦上去值就是最終的值。

解決方法：

因此我用了一個深拷貝的方式解決了他這個問題。

for(var i=0; i<columnWidth.length; i++){
	newArrTrue.push(JSON.parse(JSON.stringify(spaceColumn)));
	newArrTrue[i].width = columnWidth[i];
}
console.log(newArrTrue)
複製代碼

先後打印結果對比：

關於淺拷貝：

Object.assign():

for(var i=0; i<columnWidth.length; i++){
	newArrTrue1.push(Object.assign(spaceColumn));
	newArrTrue1[i].width = columnWidth[i];
}
console.log(newArrTrue1)
打印結果：
// 0: {title: "", halign: "center", align: "center", sortable: false, width: 120}
// 1: {title: "", halign: "center", align: "center", sortable: false, width: 120}
// 3: {title: "", halign: "center", align: "center", sortable: false, width: 120}
// 4: {title: "", halign: "center", align: "center", sortable: false, width: 120}

複製代碼

$.extend(false,objCopy,objsNew)方法：

var objs = {a:1,b:2}
var objsNew = {a:2,c:3}
console.log($.extend(false,objs,objsNew))
console.log(objs)
打印結果：
//{a: 2, b: 2, c: 3}
//{a: 1, b: 2}複製代碼

關於深拷貝：

關於深拷貝通常我會使用JSON.parse(JSON.stringify())的方法、固然上面的$.extend(true,objCopy,objsNew),注意:裏面已經變成了true，也是可達到深拷貝的效果。不放本身能夠試試。

總結：

深拷貝和淺拷貝在網上也看了很多人本身封裝的方法去達到目的，在這裏我就沒再寫什麼本身封裝的方法，寫了也就是大同小異，直接丟出來幾個現有的方法供參考。用過react開發的都知道，在react開發中你要頻繁的操做state，若是不用深拷貝你會發現改變了原有的值，若是多個組件用到這個值，而你只想改變這一個組件，這時就改變了全部的組件值，顯然這個是很不合理的，因此不少人在操做的時候反覆使用了深拷貝，JSON.parse(JSON.stringify(value));而immutable.js恰好提供了強大API去管理數據，方便好用，大大解決了開發者避免踩得坑。

                                                                          -------------填坑無數，才能一馬平川