JS-[浅拷贝和深拷贝]

Posted 2022-05-24 yangjiale

 

 

JS-浅拷贝和深拷贝

• 什么是深拷贝和浅拷贝
• 浅拷贝
• 深拷贝
• 常见深拷贝和浅拷贝举例
• 浅拷贝的实现
• 手动实现
• 自带函数实现（对象）：Object.assign()
• 拷贝对象
• 拷贝数组
• 自带函数实现（数组）：Array.concat()
• concat()函数介绍
• 实现浅拷贝
• 自带函数实现（数组）：Array.slice()
• slice()函数介绍
• 实现浅拷贝
• 深拷贝的实现
• jQuery的extend()函数实现
• extend()介绍
• 实现深拷贝

 

什么是深拷贝和浅拷贝

浅拷贝

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

例子：

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影响