JS实现深拷贝的几种方式

概念

深拷贝：在堆内存中重新开辟一个存储空间，完全重新构建一个一模一样的对象；
浅拷贝：不在堆内存中重新开辟空间，只复制栈内存中的引用地址。由于指向同一个引用地址，在修改对象的值时会出现一起修改的错误。直接进行对象赋值就是一种浅拷贝。

如图：

深拷贝就是将数据在堆中进行了拷贝的结果，这样对复制过后的对象的操作便不会影响到原对象。

浅拷贝两个对象指向同一个堆内存空间。修改其中一个另外一个也会跟着变。

1、递归方式（推荐，项目中最安全最常用）

function deepClone(data) {
				const copyObj = Array.isArray(obj) ? [] : {};
				for (var i in data) {
					if (data.hasOwnProperty(i) == true) {
						//判断子元素是否为对象，如果是，递归复制
						if (data[i] instanceof Object) {
							copyObj[i] = deepClone(data[i])
						} else {
							//如果不是，简单复制
							copyObj[i] = data[i]
						}
					}
				}
				return copyObj;
}

2、第三方库lodash中的cloneDeep()方法

1.安装

 npm i lodash

2.组件引入

import _ from 'lodash'

3.使用

const form = _.cloneDeep(拷贝的对象)

3、JSON.parse(JSON.stringify(obj)) ；(这个不推荐使用，有坑)

普通的对象也可以进行深拷贝，但是！！！当对象内容项为number,string.boolean的时候，是没有什么问题的。但是，如果对象内容项为undefined,null,Date,RegExp,function，error的时候。使用JSON.parse(JSON.stringify())进行拷贝就会出问题了。

4. Object.assign(target, source)、Object.create

弊端：只能深拷贝第一层对象。更深层次的无法拷贝。

5. ...扩展运算符

弊端：也是只能深拷贝第一层对象。更深层次的无法拷贝。