深拷贝和浅拷贝的那些事！

工做中一位同事大姐遇到了难题，我打眼一看是由于没有深拷贝的缘由，三下五除二给她解决了，废话很少说，开始撸代码。

代码展现：

基本业务：新数组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去管理数据，方便好用，大大解决了开发者避免踩得坑。

                                                                          -------------填坑无数，才能一马平川