深拷贝与浅拷贝

js基础 专栏收录该内容
1 篇文章 0 订阅

深拷贝与浅拷贝

概念:浅拷贝只是复制了对象的引用地址,两个对象指向了同一个内存地址,只要修改其中任何一个对象的值,另外一个也会随之改变。
深拷贝是将对象及值复制过来,两个对象中的值进行修改都不会影响另外一个,这就是深拷贝。

基本类型–名值存储在栈内存中,例如 let a = 1;b = a;,栈内存会新开辟一个内存,所以当 a = 2;,对 b 并不会造成影响。但是这并不是深拷贝,深拷贝本身只针对较为复杂的 object 类型数据。
引用数据类型–名存在栈内存中,值存于堆内存中,但是栈内存会提供一个引用的地址指向堆内存中的值。
在这里插入图片描述
b = a 进行拷贝时,复制的是 a 的引用地址,而并非堆里的值。
在这里插入图片描述
而当 a[0] = 1 进行数据修改的时候,由于 ab 指向的是同一个地址,所以自然 b 也受了影响,这就是所谓的浅拷贝。
在这里插入图片描述
那要是在堆内存中也开辟一个新的内存专门为 b 存放值,就像基本类型那样,岂不是就可以达到深拷贝的效果了。
在这里插入图片描述

实现深拷贝的方法

递归

递归:封装一个深拷贝的函数

function deepClone (obj) {
	let objClone = Array.isArray(obj)?[]:{};
	if(obj && typeof obj === 'object'){
		for(key in obj){
			if(obj.hasOwnProperty(key)){
				//判断obj的子元素是否为对象,如果是,递归复制
				if(obj[key] && typeof obj[key] === 'object'){
					objClone[key] = deepClone(obj[key]);
				}else{
					//如果不是,简单复制
					objClone[key] = obj[key];
				}
			}
		}
	}
	return objClone;
}
let a = [1,2,{name: 'zhangsan',age: 24},4]
b = deepClone(a)
a[0] = 2;
a[2].age = 26
console.log(a,b)

在这里插入图片描述
这里再次强调,深拷贝,是拷贝对象各个层级的属性,可以看个例子。

let a = [1,2,3,4];
let b = a.slice();
a[0] = 2;
console.log(a,b)

在这里插入图片描述
那是不是说 slice 也是深拷贝呢,毕竟 b 也没受 a 的影响,但是我们再把 a 改改;

let a = [1,2,[3,4],5];
let b = a;
a[0] = 2;
a[2][1] = 6;
console.log(a,b)

在这里插入图片描述
这时候可以发现,拷贝的不彻底,b 对象的一级属性确实不受影响了,但是二级属性还是没有拷贝成功,仍然脱离不了 a 的控制,说明 slice 不是真正的深拷贝。
同理,concat 方法与 slice 也存在这样的情况。不是真正的深拷贝。

JSON对象的parse和stringify

function deepClone (obj) {
	let _obj = JSON.stringify(obj);
	let objClone = JSON.parse(_obj);
	return objClone
}
let a = [1,2,[3,4],5];
let b = deepClone(a);
a[0] = 2;
a[2][1] = 6;
console.log(a,b)

在这里插入图片描述
可以看到这下 b 是完全不受 a 的影响了。
但是缺陷比较明显:当 ObjectArray 中值为 undefined、所有函数以及 symbol 时,JSON.stringify(obj)Object 序列化时会忽略这些值,JSON.stringify(obj)Array 序列化时会将这些值转化为 null,但是该方法足以应对简单的不含有上述值的对象了。

function deepClone (obj) {
	let _obj = JSON.stringify(obj);
	let objClone = JSON.parse(_obj);
	return objClone
}
let a = {
	name: 'xxx',
	eat: function () {
		alert('吃饭了')
	},
	age: undefined,
 };
let b = deepClone(a);
console.log(a)
console.log(b)

在这里插入图片描述

function deepClone (obj) {
	let _obj = JSON.stringify(obj);
	let objClone = JSON.parse(_obj);
	return objClone
}
let a = [1,function(){alert(222)},3,undefined,7]
let b = deepClone(a);
console.log(a)
console.log(b)

在这里插入图片描述

Jquery的extend方法

$.extend([deep],target.object1,object2)deepboolean 值,true 为深拷贝,false 为浅拷贝,target.object1 为目标对象,object2 为需要拷贝的对象。

let a = [0,1,[2,3],4];
let b = $.extend(true,[],a);
a[0] = 1;
a[2][1] = 5;
console.log(a,b);

let c = [1,function(){alert(222)},3,undefined,7,null,8]
let d = $.extend(true,[],c);
console.log(c,d);

let e = {
	name: 'xxx',
	eat: function () {
		alert('吃饭了')
	},
	age: undefined,
	book: null,
 };
let f = $.extend(true,[],e);
console.log(e,f);

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
可以看出,效果与上面的方法一样,只是需要依赖 JQ 库;同时会把数组中的 undefined 变为空,把对象中的 undefined 忽略。

  • 1
    点赞
  • 1
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值