JS-[浅拷贝和深拷贝]

Posted yangjiale

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS-[浅拷贝和深拷贝]相关的知识,希望对你有一定的参考价值。

 

 

 

什么是深拷贝和浅拷贝

浅拷贝

拷贝时拷贝的是一个对象的地址,若被拷贝对象被修改,则拷贝对象也会随之更改

例子:

var a=[1,2,3];
var b=a;
a[0]=4;
console.log(b[0]);	//输出4

深拷贝

拷贝时拷贝的是一个对象的值,拷贝对象的值不会随被拷贝对象改变

例子:

var a=1;
var b=a;
a=2;
console.log(b);	//输出1

常见深拷贝和浅拷贝举例

var obj=
	a:1,
	b:2,
	c:
		d:3
	
;
var obj2=;
obj2[‘a‘]=obj[‘a‘]; //深拷贝
obj2[‘c‘]=obj[‘c‘]; //浅拷贝,传的是d的地址

浅拷贝的实现

有一个obj如下,要把它浅拷贝给另一个对象:

var obj=
	a:1,
	b:2,
	c:
		d:3
	
;

手动实现

var obj2=;
for(var i in obj)
	obj2[i]=obj[i];

console.log(obj2);	//a: 1, b: 2, c: Object

自带函数实现(对象):Object.assign()

拷贝对象

var obj2=;
Object.assign(obj2,obj);	//Object.assign(目标对象,源对象)

或者这种形式:

var obj2=Object.assign(,obj);

拷贝数组

拷贝数组时把换为[]即可:

var arr=[1,2,3];
var arr2=Object.assign([],arr);

自带函数实现(数组):Array.concat()

concat()函数介绍

concat()用来连接多个数组,并返回一个连接后的副本,不会影响原数组

连接元素

var arr=[1,2,3];
console(arr.concat(4,5));	//1,2,3,4,5

两数组连接

var arr=[1,2,3];
var arr2=[4,5];
console(arr.concat(arr2)); //1,2,3,4,5

多数组连接

var arr=[1,2,3];
var arr2=[4,5];
var arr3=[6,7];
console(arr.concat(arr2,arr3)); //1,2,3,4,5,6,7

实现浅拷贝

var arr=[1,2,a:3];
var arr2=arr.concat();	//没参数表示仅拷贝自身
arr2[2].a=4;
console.log(arr[2].a);	//输出4,同Object.assign()一样仅拷贝了引用对象的地址

自带函数实现(数组):Array.slice()

slice()函数介绍

Array.slice(start,end); 截取数组元素,start指定开始位置(从0开始,若为负数表示倒叙第几个),end指定结束位置(可省)

实现浅拷贝

var arr=[1,2,a:3];
var arr2=arr.slice(0);
console.log(arr===arr2); //false,===表示严格相等

深拷贝的实现

jQuery的extend()函数实现

extend()介绍

extend()使用基本的递归思路实现拷贝

extend()函数用于将一个或多个对象的内容合并到目标对象
extend(是否深度合并,目标对象,合并对象1,合并对象2 …)
是否深度合并 为 false时是浅拷贝,true时是深拷贝

实现深拷贝

var arr=[1,2,a:3];
var arr2=$.extend(true,,arr);
arr2[2].a=4;
console.log(arr[2].a);	//输出3,未被arr2影响

以上是关于JS-[浅拷贝和深拷贝]的主要内容,如果未能解决你的问题,请参考以下文章

js实现浅拷贝和深拷贝

C#的浅拷贝和深拷贝

NumPy之浅拷贝和深拷贝

js浅拷贝(地址引用)和深拷贝(克隆)

JS 原生方法原理探究如何实现浅拷贝和深拷贝?

c++中的拷贝是怎么回事,请举例说明浅拷贝和深拷贝?