关于深拷贝和浅拷贝

最新推荐文章于 2025-09-08 17:59:21 发布

转载最新推荐文章于 2025-09-08 17:59:21 发布 · 56 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mei123/p/8548772.html

文章标签：

#javascript #ViewUI

本文详细解释了JavaScript中浅拷贝和深拷贝的区别，并通过具体示例展示了数组赋值时的问题及解决方案。此外，还介绍了实现深拷贝的三种方法：slice函数、concat函数和Object.assign。

1.浅拷贝

JavaScript存储对象都是存地址的，所以浅复制会导致 a 和 b 指向同一块内存地址

数组的赋值其实相当于给了索引，改变其中一个变量其他引用都会改变

var a = [1,2,3];
var b = a;
b[0] = 4;
//a为4 2 3
//b为4 2 3

var a = [1,2,3];
var b = a;
b[0] = 4;
//a为4 2 3
//b为4 2 3

根据上面存储对象的问题，这里就可以解决另一个问题：

原始参数（比如一个具体的数字）被作为值传递给函数；值被传递给函数，如果被调用函数改变了这个参数的值，这样的改变不会影响到全局或调用函数。

你传递一个对象（在js里数组不是简单数据类型，而是对象）到一个函数，如果在函数里面改变了这个参数的内容，在外部这个变化是可见的。

2.深拷贝

（1）slice 函数

（2）concat 函数

（3）assgin

三个函数的原理都是返回数组的一个副本（相当于另外开辟内存空间），所以并不会改变数组本身的的值

但是这里有一点不同，就是assgin与其他两点的不同

虽然说assgin也是深拷贝，但是他只是第一层深拷贝，第二层之后还是进行浅拷贝，例子如下：

var a = {
a1:{
aa1:'11',
aa2:'22'
}
}
var b = object.assgin({},a);
var c = object.assgin({},a);
b.a1.aa1 = 33;
/*
b:{
a1:{
aa1:'33',
aa2:'22'
}
}
c:{
a1:{
aa1:'33',
aa2:'22'
}
}
*/

var a = {
	a1:{
		aa1:'11',
		aa2:'22'
	}
}
var b = object.assgin({},a);
var c = object.assgin({},a);
b.a1.aa1 = 33;
/*
b:{
	a1:{
		aa1:'33',
		aa2:'22'
	}
}
c:{
	a1:{
		aa1:'33',
		aa2:'22'
	}
}
*/

转载于:https://www.cnblogs.com/mei123/p/8548772.html