今天同事问到一个问题,他在vue中遍历一个动态数组。数组中的元素是对象,当你选择同一个对象,放入到数组中去,然后使用vue的v-for进行循环的时候,生成的对象,里面的同一个对象数据就会同步变化。如下图:冲刺课,是有类别的。所以可以同一个对象选择多次。这样才会出现上面的问题。最终的问题就定位到JavaScript的深度和浅度拷贝。
我也是从这个问题,才体会到基础知识的重要性。闲话少说,我们直接开始讲述知识点。
在js中,有基本数据类型(Number
、String
、Boolean
)和引用数据类型(对象和数组)。对于基本数据类型,他们之间的值得传递是按值传递,所以不会出现上述的问题:代码如下:
但是如果我们把上述的基本数据类型变成引用数据类型:代码如下:
复制一份obj1叫做obj2,然后把obj2.b改成100,但却不小心改到obj1.b,因为他们根本是同一个对象,这就是所谓的浅拷贝。
如果想要避免这种情况,该怎么办呢?
这样就可以避免上述的问题了。
浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象。
深拷贝对象都是js中引用类型的对象,基本类型的没有涉及,本质上就是引用类型的对象在堆上分配空间,而深拷贝就是重新给对象在堆上分配一个空间,然后将复制内容到这个新的空间中;而浅拷贝恰恰只是在栈上重新定义了一个指针,指向的位置却依然是原来引用对象的堆空间,改变指的时候当然就都变啦。我们用一张图来说明一下:
浅复制的原理:
当我们改变引用数据类型的时候:会跟着一起变。
总结:浅复制是对值的复制,对于对象来说,浅复制是对对象地址的复制,并没 有开辟新的栈,也就是复制的结果是两个对象指向同一个地址,修改其中一个对象的属性,则另一个对象的属性也会改变。
深度复制的原理:
代码如下:
这个时候我们再次利用上面的例子来看看:
总结:深复制则是开辟新的栈,两个对象对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性。
那么我们针对我们遇到的问题,进行处理,就是让我们数组中存在的相同对象,变成不同的对象。也就是如何让一个对象进行深层次的复制。那么深层次复制的方法有那些呢?
深层次复制的方法:
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。