JS前端如何实现深拷贝、浅拷贝

前言：

基本数据类型 ：string、number、boolean、undefined、null、symbol
引用数据类型：Array、function、object… (除基本数据类型外的所有类型都是引用数据类型)

因为基本数据类型可直接赋值，不考虑地址的引用，所以深拷贝浅拷贝只是相对于引用数据类型来说的。

一、如何实现浅拷贝？

所有浅拷贝都是对象地址的引用，生成的新对象并未改变原有内存地址

1. 使用Object.asign(目标对象，源对象)来进行对象拼接

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

let obj1 = {
	name:'小明',
	age:12
}
let obj2 = Object({},obj1)
// obj2 = {
//	name:'小明',
//	age:12
// }

obj2.name = '小王'

console.log(obj1.name) // 小王
console.log(obj2.name) // 小王

因为Object.assign()也是取的对象的地址的引用，所以也是浅拷贝

2. 使用结构运算符 …

let obj1 = {
	name:'小明',
	age:12
}
let obj2 = {...obj1}

3. 使用数组方法slice、concat浅拷贝数组对象

let obj1 = {
	name:'小明',
	age:12
}
let obj2 = obj1.concat()  // 将obj1与空拼接，得到新对象obj2 
let obj3 = obj1.slice(0)  // slice(star,end) 返回数组从start 到end 的元素，生成新数组

二、如何实现深拷贝？

第一种方法， 采用递归遍历：将引用数据类型按照同样的key、value 生成一个新对象(改变内存地址)

function deepClone(data) {
	const targetObj = data.constructor == Array ? [] : {}
	for (let key in data) {
		if (data.hasOwnProperty(key)) {
			if (data[key] && typeof data[key] === 'object') {
				targetObj[key] = data[key].constructor == Array ? [] : {};
				targetObj[key] = deepClone(data[key])
			} else {
				targetObj[key] = data[key]
			}
		}
	}
	return targetObj
}

第二种方法， 使用lodash插件

安装插件

npm i --save lodash

页面内引入

import _ from 'lodash'//引入组件

深克隆

const data= _.cloneDeep(this.Object)