JavaScript对象浅拷贝和深拷贝

1. 基本概念

对象是引用类型,在声明引用类型的时候,对象是存储在堆内存中的,而js不能直接操作内存,所以引用类型的变量实际上是一个指针,指针指向存储在堆内存中的对象,例:

const obj = {}

在这里插入图片描述

2. 浅拷贝

const obj1 = {
	name: '小明'
}
const obj2 = obj1
obj1.name = '小红'
console.log(obj1.name) // 小红
console.log(obj2.name) // 小红

浅拷贝实际上拷贝的只是对象的引用,他们的指针指向是堆内存中同一个对象,当修改obj1中name的值为小红时,因为obj2也指向的这个对象,所以obj2中name的值也为小红。
在这里插入图片描述

3. 深拷贝

浅拷贝因为指针都指向堆内存中的同一个对象,所以修改对象的值所有指向这个对象的变量都会改变,有时候我们并不想所有都改变,所以就要用到深拷贝,深拷贝是将对象在内存中完全的拷贝一份出来,让变量指针都指向不同的对象,这样修改其中一个对象的值就不会影响其他对象,如图:
在这里插入图片描述

3.1 深拷贝JSON方法

深拷贝最简单的方法是使用JSON.parse和JSON.stringify,如下:

const obj1 = {
	name: '小明'
}
const obj2 = JSON.parse(JSON.stringify(obj1))
obj1.name = '小红'
console.log(obj1.name) // 小红
console.log(obj2.name) // 小明

可以看到改变obj1的name之后obj2的name并没有受到影响,但是这个方法有个问题,当对象中有值为function、undefined、symbol,不会被拷贝,如:

const obj1 = {
	name: '小明',
	show() {},
	age: undefined,
}
const obj2 = JSON.parse(JSON.stringify(obj1))
console.log(obj1) // {name: "小明", age: undefined, show: ƒ}
console.log(obj2) // {name: "小红"}
obj1.show() // true
obj2.show() // obj2.show is not a function

3.2 深拷贝手写递归方法

这个方法挺好,缺点是如果对象嵌套过深会有一定的性能消耗。

const deepCopy = (obj) => {
	const result = Array.isArray(obj) ? [] : {};
	for (let i in obj) {
		if (obj.hasOwnProperty(i)) {
			if (typeof obj[i] === 'object' && obj[i]!==null) {
				result[i] = deepCopy(obj[i]);   //递归复制
			} else {
				result[i] = obj[i];
			}
		}
	}
	return result;
}
const obj1 = {
	name: '小明',
	show() {},
	age: undefined,
}
const obj2 = deepCopy(obj1)
obj1.name = '小红'
console.log(obj1.name) // 小红
console.log(obj2.name) // 小明

4. 第三方库的浅拷贝和深拷贝

推荐直接用第三方库,省事~

4.1 jquery

jquery中浅拷贝与深拷贝都是通过extend方法,通过参数区分,如:

$.extend(true, obj1, obj2) // 深拷贝
$.extend(obj1, obj2) // 浅拷贝

4.2 lodash

lodash中使用cloneDeep方法进行深拷贝,这也是我用的最多的方法。

import _ from 'lodash'
const obj1 = {
	name: '小明',
	show() {},
	age: undefined,
}
const obj2 = _.cloneDeep(obj1)

5. 其他补充

5.1 Object.assign是浅拷贝还是深拷贝

属于浅拷贝,引用阮一峰ECMAScript 6中的一段话来解释:

Object.assign()方法实行的是浅拷贝,而不是深拷贝。也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

吴佩佩佩佩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值