码迷,mamicode.com
首页 > Web开发 > 详细

JS-[浅拷贝和深拷贝]

时间:2019-07-29 00:25:19      阅读:120      评论:0      收藏:0      [点我收藏+]

标签:bsp   拷贝   引用   一个   改变   hellip   相等   number   ati   

 

 

 

什么是深拷贝和浅拷贝

浅拷贝

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

例子:

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-[浅拷贝和深拷贝]

标签:bsp   拷贝   引用   一个   改变   hellip   相等   number   ati   

原文地址:https://www.cnblogs.com/yangjiale/p/11261360.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!