关于深拷贝和浅拷贝的概念和区别在这里就不再赘述了，
而常规的JSON.parse(JSON.stringfy(data)方式存在很多缺陷，例如无法处理undefined、function、特殊引用类型、循环引用等。
最近尝试手写一下深拷贝的实现，分享一下思路和代码。（完整代码见文章末尾）
一、整体思路
深拷贝要考虑的点还是挺复杂的，数据类型太多需要一一处理，具体我是怎么一步步手写以及修改填坑的过程就不多说了，就大概说一下我的代码流程吧。
（定义源数据为target，克隆后的数据为result）
1、数据类型划分处理
-
数据类型的判断就通过这个方法即可：
const type = Object.prototype.toString.call(target).match(/\s(\w+)\]/)[1]返回数据target的类型，首字母大写，之所以返回首字母大写的格式也是为了后面通过new构造函数的方式生成拷贝实例。
-
先区分基本数据类型和复杂数据类型，基本数据类型直接返回结果：
if (typeof target !== 'object' || target === null) { // 基本数据类型 result = target } -
针对复杂数据类型再划分成两类，一类是需要递归拷贝的类型：
if (['Array', 'Set', 'Map', 'Object', 'Arguments'].includes(type)) { } -
另一类是不需要递归的类型，也就是其他所有类型，逐个做处理赋值。
2、递归处理
针对'Array', 'Set', 'Map', 'Object', 'Arguments'这五中类型需要做递归深度遍历，写递归的核心就是做好变量传参和递归出口，将已处理的结果作为参数递归传入，然后定义递归的出口防止死循环。
只是不同的类型遍历的方式稍有不同：
// Array
target.forEach(v => {
result.push(clone(v))
})
// Set
target.forEach(v => {
result.add(clone(v))
})
// Map
target.forEach((v, k) => {
result.set(k, clone(v))
})
// Object Arguments
Object.keys(target).forEach(k => {
result[k] = clone(target[k])
})
不要使用for…in遍历，因为它会遍历对象的所有可枚举属性，包括原型链上的，原型链上的属性不应该拷贝到新对象自身属性上。
二、特殊处理
1、拷贝结果的初始化
意思就是拷贝赋值时是通过什么方式，比如拷贝一个对象，推荐不使用result = {}的字面量方式，而是采用new构造函数的方式来初始化result，即result = new Object()。
这样做的好处就是能保持原始构造函数的原型和继承信息，比如通过es6的class形式创造的Person类，通过对象字面量初始化拷贝时，访问它的构造函数是Object，而通过new初始化拷贝后访问构造函数是Person。
const Constr = target.constructor
result = new Constr()
2、循环引用的处理
循环引用即源数据中可能存在内部数据互相引用的问题，如不处理在递归的时候会导致死循环。
处理循环引用可以利用map或weakMap数据结构很巧妙的实现，即每次处理需递归的类型时都把当前要递归的子数据作为key、把result结果作为value写进map里，然后在递归之前先检查一下要递归的数据是否已存在于map中，如果已存在就直接取出value返回。
if (map.get(target)) {
result = map.get(target)
} else {
const Constr = target.constructor
result = new Constr()
map.set(target, result)
// 先给map赋值，在下面写常规的递归逻辑
}
3、不需要的递归的一些特殊类型
（1）正则
if (type === 'RegExp') {
// RegExp
result = new Constr(target.source, /\w*$/.exec(target))
result.lastIndex = target.lastIndex
}
（2）函数
函数暂时没发现有需要拷贝的场景，再加上函数柯里化的形式难以处理，所以简单点直接赋值返回。
if (type.includes('Function')) {
// Function AsyncFunction GeneratorFunction
result = target
}
（3）错误对象
if (type === 'Error') {
// Error
result = new Constr(target.message)
result.stack = target.stack
}
（4）包装过的基本数据类型
例如new Number(1)、Object(Symbol(1))等，包括未具体判断的类型都统一处理。
else {
try {
// 包装过的 Number String Symbol BigInt
const val = Constr.prototype.valueOf.call(target)
result = Object(val)
} catch (err) {
// other
console.warn(`Uncatched type：${type}`)
console.warn(err)
}
}
可能还有一些没有考虑到的数据类型需要做特殊处理，以后遇到了再更。
三、完整代码
1、函数实现
/**
* @description: 深克隆方法
* @param {any} target 源数据
* @return {any} 克隆后的数据
*/
function deepClone (target) {
function clone (target, map = new WeakMap()) {
let result
const type = Object.prototype.toString.call(target).match(/\s(\w+)\]/)[1]
if (typeof target !== 'object' || target === null) {
// 基本数据类型
result = target
} else {
if (['Array', 'Set', 'Map', 'Object', 'Arguments'].includes(type)) {
// 可递归遍历的类型处理
// 循环引用处理
if (map.get(target)) {
result = map.get(target)
} else {
const Constr = target.constructor
result = new Constr()
map.set(target, result)
if (type === 'Array') {
// Array
target.forEach(v => {
result.push(clone(v, map))
})
} else if (type === 'Set') {
// Set
target.forEach(v => {
result.add(clone(v, map))
})
} else if (type === 'Map') {
// Map
target.forEach((v, k) => {
result.set(k, clone(v, map))
})
} else {
// Object Arguments
Object.keys(target).forEach(k => {
result[k] = clone(target[k], map)
})
}
}
} else {
// 不可递归遍历的类型处理
const Constr = target.constructor
if (type === 'RegExp') {
// RegExp
result = new Constr(target.source, /\w*$/.exec(target))
result.lastIndex = target.lastIndex
} else if (type.includes('Function')) {
// Function AsyncFunction GeneratorFunction
result = target
} else if (['Date'].includes(type)) {
// Date
result = new Constr(target)
} else if (type === 'Error') {
// Error
result = new Constr(target.message)
result.stack = target.stack
} else if (type === 'URL') {
// URL
result = new Constr(target.href)
} else if (type.includes('Array')) {
// ArrayBuffer TypeArray BigArray ...
result = target.slice()
} else if (type === 'DataView') {
// DataView
result = new Constr(target.buffer.slice(0), target.byteOffset, target.byteLength)
} else {
try {
// 包装过的 Number String Symbol BigInt
const val = Constr.prototype.valueOf.call(target)
result = Object(val)
} catch (err) {
// other
console.warn(`Uncatched type：${
type}`)
console.warn(err)
}
}
}
}
return result
}
const res = clone(target)
return res
}
2、测试代码
/**
* 测试
*/
const target = {
a: {
b1: 2,
b2: 5,
},
b: [1 , 2, {
c1: 3, c2: 4 }],
c: 1,
d: Symbol(123),
e: undefined,
f: null,
g: () => {
},
h: new Date(),
i: /123/gi,
j: Object(Symbol(45)),
k: new Error('wrong'),
l: new URL('https://www.baidu.com:80/#/index'),
m: new Number(12),
n: new String('23'),
o: new Boolean('23'),
p: BigInt('23'),
q: Object(BigInt('23')),
r: new ArrayBuffer(10),
s: new Int8Array(10),
}
target.z = {
ref: target }
const result = deepClone(target)
console.log(result)
参考链接：https://juejin.cn/post/6844903929705136141