js引用类型深拷贝与浅拷贝Object.assign()

本文深入探讨了JavaScript中对象的深拷贝与浅拷贝的区别,以及基本类型和对象类型在内存中的存储方式。通过实例展示了如何使用JSON和Object.assign实现不同类型的拷贝,并分析了对象属性在堆内存和栈内存中的变化。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

        let arr = [],
	 obj = {
		a: 1
	}
	for(let i = 0; i < 3; i++) {

		arr.push(obj)

	}
// 基本变量的值一般都是存在栈内存中,而对象类型的变量的值存储在堆内存中,栈内存存储对应空间地址。基本的数据类型: Number 、Boolean、Undefined、String、Null。
	console.log(arr) //[{ a: 2 },{ a: 2 },{ a: 2 }] 内存地址被替换指向{a:2}
	console.log(JSON.parse(JSON.stringify(arr))) //[{ a: 1 },{ a: 1 }]防止重新赋值
	console.log(obj)//{a:1}
//当我们执行obj.a = 2 时,堆内存就有新的对象{a:2},栈内存的b指向新的空间地址( 指向{a:2} ),而堆内存中原来的{a:1}就会被程序引擎垃圾回收掉,节约内存空间。
	obj.a = 2 
	console.log(obj)//{a:2}
	console.log(arr) //[{ a: 2 },{ a: 2 }]

	console.log("//////////////////////////////////////////////////")

	// 深拷贝  如果对象的属性值为一般类型(string, number),通过Object.assign({},srcObj)得到的新对象是深拷贝
	let obj1 = {
		a: 1,
		b: 2
	};

	let obj2 = Object.assign({}, obj1, {
		b: 20
	});

	console.log('obj1', obj1); // { a: 1, b: 2 }
	console.log('obj2', obj2); // { a: 1, b: 20 }

	console.log("//////////////////////////////////////////////////")

	// 浅拷贝  如果属性值为对象或其它引用类型,通过Object.assign({},srcObj)得到的新对象是浅拷贝
	obj1 = {
		a: 1,
		b: {
			c: 2,
			d: 3
		}
	};
	obj2 = Object.assign({}, obj1);
	obj2.a = 10;
	obj2.b.c = 20;
	console.log('obj1', obj1); // { a: 1, b: { c: 20, d: 3 } }
	console.log("obj2", obj2) //{ a: 10, b: { c: 20, d: 3} }
	console.log("//////////////////////////////////////////////////")
	//Object.assign({})和Object.assign()   里面加与不加{}的区别   ;
	var test1 = {
			a: 'a'
		},

		test2 = {
			b: {
				c: 1
			}
		};

	// Object.assign({}) 原始对象不会被改变
	console.log(Object.assign({}, test1, test2)); //合并之后{ a: "a", b: {c:1} }
	console.log(test1) // {a:'a'}
	console.log(test2) // {b:{c:1}}
	// Object.assign() 原始对象会被改变(改变的只是被覆盖的原始对象test2覆盖test1)
	console.log(Object.assign(test1, test2)); //合并之后{ a: "a", b: {c:1} }
	console.log(test1) //{ a: "a", b: {c:1} }
	console.log(test2) // {b:{c:1}}
	//当替换一下被覆盖的对象test1覆盖test2
	console.log(Object.assign(test2, test1)); //合并之后{ a: "a", b: {c:1} }
	console.log(test1) //{ a: "a"}此结果是在上面test2覆盖test1测试注释情况下得到,如果不注释打印得到{ a: "a", b: {c:1} },因为上面test1={ a: "a", b: {c:1} }
	console.log(test2) // { a: "a", b: {c:1} }

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值