2025年js深拷贝与浅拷贝的区别（js深拷贝和浅拷贝如何实现）

编程日记 • 2025-04-13 14:01 • 阅读 12

浅拷贝：拷贝后，修改拷贝后的对象，会影响拷贝前的对象

深拷贝：拷贝后，修改拷贝后的对象，不影响之前的对象

浅拷贝是拷贝一层，深层次的对象级别的就拷贝引用；深拷贝是拷贝多层，每一级别的数据都会拷贝出来；

基本数据类型，名字和值都会储存在栈内存中。

引用数据类型，名字存在栈内存中，值存在堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值

当b=a进行拷贝时，其实复制的是a的引用地址，而并非堆里面的值。而当我们a[0]=1时进行数组修改时，由于a与b指向的是同一个地址，所以自然b也受了影响，这就是所谓的浅拷贝了。

在堆内存中也开辟一个新的内存专门为b存放值，就像基本类型那样，就可以达到深拷贝的效果了

1.直接赋值

例如数组：

2.循环

对象

3.Object.assign()

只传递了一个source参数。

运行结果：

4.运算符 (...)

1.使用JSON.parse(JSON.stringify(object))

查看运行结果：

在修改b之后，不影响a。

但是这种方法也有不少坏处，譬如它会抛弃对象的constructor。也就是深拷贝之后，不管这个对象原来的构造函数是什么，在深拷贝之后都会变成Object。

这种方法能正确处理的对象只有 Number, String, Boolean, Array, 扁平对象，即那些能够被 json 直接表示的数据结构。RegExp对象是无法通过这种方式深拷贝。

也就是说，只有可以转成JSON格式的对象才可以这样用，像function没办法转成JSON。

要复制的会直接消失，所以这个方法只能用在单纯只有数据的对象。

注意：

当转换的对象为空字符串的时候，最后结果也是空字符串

但是当内部的值为undefined时，这个不会返回正常结果，只会报错

结果：

2.

运行结果：

继承属性和不可枚举属性是不能拷贝的。

3.递归

4.Object.create()

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

5.lodash的深拷贝函数

官方中文文档：https://www.lodashjs.com/docs/lodash.cloneDeep

官方文档：https://lodash.com/docs/#cloneDeep

为要拷贝的值，返回拷贝后的值

这个函数会递归拷贝

参考：Object.assign() MDN

js浅拷贝与深拷贝的区别和实现方式

终于弄清楚JS的深拷贝和浅拷贝了