JavaScript中浅拷贝和深拷贝的区别和实现

今天同事问到一个问题，他在vue中遍历一个动态数组。数组中的元素是对象，当你选择同一个对象，放入到数组中去，然后使用vue的v-for进行循环的时候，生成的对象，里面的同一个对象数据就会同步变化。如下图：冲刺课，是有类别的。所以可以同一个对象选择多次。这样才会出现上面的问题。最终的问题就定位到JavaScript的深度和浅度拷贝。

我也是从这个问题，才体会到基础知识的重要性。闲话少说，我们直接开始讲述知识点。

在js中，有基本数据类型（Number、String、Boolean）和引用数据类型（对象和数组）。对于基本数据类型，他们之间的值得传递是按值传递，所以不会出现上述的问题：代码如下：

但是如果我们把上述的基本数据类型变成引用数据类型：代码如下：

复制一份obj1叫做obj2，然后把obj2.b改成100，但却不小心改到obj1.b，因为他们根本是同一个对象，这就是所谓的浅拷贝。

如果想要避免这种情况，该怎么办呢？

这样就可以避免上述的问题了。

浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。

深拷贝对象都是js中引用类型的对象，基本类型的没有涉及，本质上就是引用类型的对象在堆上分配空间，而深拷贝就是重新给对象在堆上分配一个空间，然后将复制内容到这个新的空间中；而浅拷贝恰恰只是在栈上重新定义了一个指针，指向的位置却依然是原来引用对象的堆空间，改变指的时候当然就都变啦。我们用一张图来说明一下：

浅复制的原理：

当我们改变引用数据类型的时候：会跟着一起变。

总结：浅复制是对值的复制，对于对象来说，浅复制是对对象地址的复制，并没 有开辟新的栈，也就是复制的结果是两个对象指向同一个地址，修改其中一个对象的属性，则另一个对象的属性也会改变。

深度复制的原理：

代码如下：

// 深度复制

var deepCopy = function( obj){

var str, newobj = obj.constructor === Array ? [] : {};

if( typeof obj !== 'object'){

return;

} else if(window.JSON){

str = JSON. stringify(obj), //系列化对象

newobj = JSON. parse(str); //还原

} else {

for( var i in obj){

newobj[i] = typeof obj[i] === 'object' ?

cloneObj(obj[i]) : obj[i];

}

}

return newobj;

};

这个时候我们再次利用上面的例子来看看：

总结：深复制则是开辟新的栈，两个对象对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。

那么我们针对我们遇到的问题，进行处理，就是让我们数组中存在的相同对象，变成不同的对象。也就是如何让一个对象进行深层次的复制。那么深层次复制的方法有那些呢？

深层次复制的方法：

1.对于只有一层结构的数据类型可以使用：

对象只有一层的话可以使用上面的：Object.assign()函数：

Object.assign({}, obj1)的意思是先建立一个空对象{}，接着把obj1中所有的属性复制过去，所以obj2会长得跟obj1一样，这时候再修改obj2.b也不会影响obj1。

因为Object.assign跟我们手动复制的效果相同，所以一样只能处理深度只有一层的对象，没办法做到真正的 Deep Copy。不过如果要复制的对象只有一层的话可以考虑使用它。

2.转成JSON

3.使用上面的深层次递归

4.使用Object.create()方法
直接使用var newObj = Object.create(oldObj)，可以达到深拷贝的效果。

5.jquery

jquery 有提供一个$.extend可以用来做 Deep Copy。

6.lodash

另外一个很热门的函数库lodash，也有提供_.cloneDeep用来做 Deep Copy。

不错的帖子：点击打开链接，点击打开链接