什么是深拷贝和浅拷贝
浅拷贝
浅拷贝的实现
手动实现
自带函数实现(对象):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}
var obj2={}; Object.assign(obj2,obj); //Object.assign(目标对象,源对象)
或者这种形式:
var obj2=Object.assign({},obj);
拷贝数组时把{}换为[]即可:
var arr=[1,2,3]; var arr2=Object.assign([],arr);
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(start,end); 截取数组元素,start指定开始位置(从0开始,若为负数表示倒叙第几个),end指定结束位置(可省)
实现浅拷贝var arr=[1,2,{a:3}]; var arr2=arr.slice(0); console.log(arr===arr2); //false,===表示严格相等
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影响