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