关于JavaScript的浅拷贝和深拷贝

最新推荐文章于 2025-10-27 10:18:40 发布

原创最新推荐文章于 2025-10-27 10:18:40 发布 · 154 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

40 篇文章

订阅专栏

博客介绍了JavaScript的浅拷贝和深拷贝。基本类型拷贝相互独立，对象是引用传值。浅拷贝复制的是内存地址，修改一个对象会影响另一个；而深拷贝可避免此问题，如使用JSON的parse和stringify方法，能使拷贝对象相互独立、互不干扰。

关于JavaScript的浅拷贝和深拷贝

在 JS 中有一些基本类型像是Number、String、Boolean

var a = 10;
var b = a;
b = 20
console.log(a)    // 10
console.log(b)    // 20

像这种基本类型的拷贝，就各自独立修改其中一个不会影响另一个。

而对象就是像这样的东西 [1,2,3]或者{name:1,age:2}，对象跟基本类型最大的不同就在于他们的传值方式。

对象的传值方式是引用传值

浅拷贝例子

var a = [1,2,3]
var b = [];
b = a;		// 浅拷贝a
console.log(a === b);    // true
console.log(b)	// [1, 2, 3]
b[0] = 5;		// 改变拷贝过来的数组任意一个值
console.log(a)	// [5, 2, 3]	==> 原数组被改变了

结果输出：

上面的例子拷贝的其实是引用的内存地址，如果更改了其中任意一个对象的值，另外一个拷贝的对象也会被改变，这就是浅拷贝。

而在很多情况下我们这么做会存在很多问题，比如一个项目多个人开发，多个人都有用到这个对象，如果我们浅拷贝的话，改变了引用内存地址的值，其他开发人员就会出错，所以我们需要做深拷贝，拷贝出来的东西自己独立出来，不跟原对象冲突

使用：JSON的parse和stringify进行深拷贝

深拷贝例子：

var	a = [1,2,3,[4,5,6]];
var b = JSON.parse(JSON.stringify(a));
console.log(a === b)		// false
b[3][0] = 22;
console.log(a)
console.log(b)

结果输出：

这里使用JSON的parse和stringify方法拷贝出来的，就都是独立了，互不干扰。