/ 前端基础

javascript中关于深复制与浅复制的问题

在javascript中,变量的类型分为基本类型和引用类型。

  1. 对于基本类型的变量来说,值的复制以及作为函数参数实参传递的过程都是值的复制传递,换句话说,是会在内存中开辟出一个新空间用于存放新的值的。这样当对新的值进行操作的时候,不会对原来的值造成影响;

  2. 而对于引用类型的变量来说,值的复制以及作为函数参数实参传递都是内存指针的传递,就是说,即使存放在一个新变量中,如果新变量的值发生变化,那么原来的引用类型的值也会跟着产生变化

对于这种引用类型的变量的值的复制,我们称为**"浅复制",就是说只是把变量的内存指针传递到了新变量中。有时候,这对我们操作引用类型的变量和参数的传递是不利的,因此,我们需要有办法进行"深复制"**,就是说在引用变量赋值时,除了传递值给新变量以外,还要开拓出一片新的内存空间用于存放这些值,这样新的变量的变化不会对原来引用类型的变量造成影响。

几种简单但有局限的方法:

  1. JSON.parse(JSON.Stringify(variable)) 这种方法利用JSON API,将数组(注意数组也可以使用这种方法)或者JSON对象转成字符串,之后再解析成新的对象,这样就完成了深复制,但是这种方法有一个缺点,就是会使新的对象丢失constructor

  2. arr.slice() 这种方法可以极方便快速地将一个数组对象进行深复制,并且效果非常好,不过可惜的是仅数组对象才有slice方法,JSON对象是不支持的;(今天写代码的时候发现slice好像没法深复制,最终用方法1解决了bug,详细原因做完事以后再研究清楚)。2017.1.1补充:这篇文章《js 中多维数组的深拷贝的多种实现方式》对数组的深复制进行了深入的探究,解释了只有一维数组才好使用这种方法进行深复制,另外arr.concat()方法也可以,不过效果类似于slice。

  3. 另外对于数组对象,这些方法也可以进行深复制,只是会比slice()更麻烦一些:arr.filter(), arr.map()