js深拷贝和浅拷贝的实现

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