JavaScript深拷贝,浅拷贝

浅拷贝和深拷贝概念

简单来说,
浅拷贝就是只拷贝一层,深层次的对象级别的就拷贝引用,
深拷贝就是层层拷贝,每一级别的数据都会拷贝出来;

如何区分深拷贝与浅拷贝?简单点来说就是,假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明是浅拷贝,如果B没变,那就是深拷贝。深入点来说,就是B复制了A,如果B复制的是A的引用,那就是浅拷贝,如果B复制的是A的本体,那就是深拷贝。在深入了解深拷贝和浅拷贝之前,我们先得了解堆栈和数据类型。

堆栈和数据类型

在js中,数据类型分为两种,基本类型和引用类型。基本类型指的是简单的数据段,而引用类型指的是那些可能由多个值构成的对象。js中有五种基本数据类型number,string,boolean,null,undefined,他们的值被以键值对的形式保存在栈中。
所以可以理解为基本类型放在栈中 存放的是地址
基本数据类型,名字和值都会储存在栈内存中
JavaScript深拷贝,浅拷贝

引用类型只有object一种。但js中除了基本数据类型,万物皆对象,数组,函数,对象都是object类型,甚至null也被认为是一个空对象,使用typeof检测时返回object。与基本类型不同的是,引用类型的值被保存在堆内存中,对象的引用被保存在栈内存中,而且我们不可以直接访问堆内存,只能访问栈内存。所以我们操作引用类型时实际操作的是对象的引用。
所以可以理解为引用类型存放在堆中 存放的是对象或者数组

引用数据类型,名字存在栈内存中,值存在堆内存中,但是栈内存会提供一个引用的地址指向堆内存中的值
JavaScript深拷贝,浅拷贝

浅拷贝

拷贝就是把父对像的属性,全部拷贝给子对象。

1.for···in只循环第一层
JavaScript深拷贝,浅拷贝
2.Object.assign方法
JavaScript深拷贝,浅拷贝
3.直接用=赋值
JavaScript深拷贝,浅拷贝

深拷贝

所谓”深拷贝”,就是能够实现真正意义上的数组和对象的拷贝,类似于递归
1.采用递归去拷贝所有层级属性
JavaScript深拷贝,浅拷贝
2.通过JSON对象来实现深拷贝
JavaScript深拷贝,浅拷贝
缺点: 无法实现对对象中方法的深拷贝,会显示为undefined

3.通过jQuery的extend方法实现深拷贝
JavaScript深拷贝,浅拷贝
4.手动实现深拷贝
JavaScript深拷贝,浅拷贝
5.直接使用var newObj = Object.create(oldObj),可以达到深拷贝的效果。
JavaScript深拷贝,浅拷贝
6.使用扩展运算符实现深拷贝
JavaScript深拷贝,浅拷贝