1.JSON.stringify+JSON.parse实现深拷贝
const obj = {
id: 1,
name: 'Suk',
hobby: [
{ name: 'basketball' },
{ name: 'football' },
{ name: 'golf' },
{ name: 'baseball' }
]
}
// 先用JSON.stringify()将obj序列化成字符串,然后再用JSON.parse()解析成对象,这样得到的对象才是真正意义上的深拷贝
const copyObj = JSON.parse(JSON.stringify(obj))
console.log(copyObj.hobby === obj.hobby) // false
2.Object.assign实现浅拷贝
const obj = {
id: 1,
name: 'Suk',
hobby: [
{ name: 'basketball' },
{ name: 'football' },
{ name: 'golf' },
{ name: 'baseball' }
]
}
const copyObj = {}
// 使用Object.assign()进行拷贝只是拷贝了当前第一层的属性,如果是基本类型就直接复制过去,如果是引用数据类型那么拷贝的还是原来的对象的属性的引用,拷贝后的引用还是指向的之前的
Object.assign(copyObj, obj)
console.log(copyObj.hobby === obj.hobby) // true
3.手动封装函数递归实现深拷贝
function deepCopy<T extends Record<string, any>>(obj: T): T | T[] {
// 如果是obj是一个原始值或者null 则不再递归拷贝直接返回
if (typeof obj !== 'object' || obj === null) {
return obj
}
// 如果是一个数组则将子元素进行递归拷贝
if (Array.isArray(obj)) {
return obj.map(deepCopy)
}
const copy = {} as Record<string, any>
// 遍历对象key进行拷贝
Object.keys(obj).forEach((key) => {
copy[key] = deepCopy(obj[key])
})
return copy as T
}
const obj = {
id: 1,
name: 'Suk',
hobby: [
{ name: 'basketball' },
{ name: 'football' },
{ name: 'golf' },
{ name: 'baseball' }
]
}
const copyObj = deepClone(obj);
console.log(obj.hobby === copyObj.hobby) // false