数组的深拷贝问题方法详解

分析

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

有如下方法
使用解构赋值 
使用 Object.create
使用 JSON.parse 和 JSON.stringify
使用 structuredClone
使用第三方库，例如 lodash
自己书写方法实现

方法

1、解构赋值有个问题，只能复制对象内第一层的值，更深一层便无能为力了。如（[...arr]）
2、使用 Object.create (let personobj = Object.create(person)) Object.create 对于数组的深拷贝不理想
Object.create 使用现有的对象来创建一个新的对象。同样的，也只能解决第一层的复制。
3、JSON.parse 和 JSON.stringify：先用 JSON.stringify 将对象序列化成字符串，再用 JSON.parse 解析回来，可以达到深拷贝的效果，并且对于多层对象同样有效。
但是对于对象中有用户定义的类型无效（如：obj={
    path: 'login',
    name: 'login',
    meta: {
      i18n: 'menu.login',
      name: i18n.t('menu.login'),
      disabled: true,
    },
    component: () => import('@/views/Login.vue'),
  }）里面的i18n.t语言切换，component属性都不能有效拷贝
  4、全局的 structuredClone() 方法使用结构化克隆算法将给定的值进行深拷贝。
  但同样对方法或自定义对象无力。使用方法（https://developer.mozilla.org/zh-CN/docs/web/api/structuredClone）
  5、使用第三方库，例如 lodash 官网（https://www.lodashjs.com/docs/lodash.cloneDeep#_clonedeepvalue）
如（_.cloneDeep(person)）
6、自身书写实现如下

深拷贝方法封装

const copyList = (arr: any) => {
  const result = []
  for (const item of arr) {
    result.push(deepclone(item))
  }
  return result
}
const deepclone: any = (obj: any) => {
  if (typeof obj === 'object') {
    // console.log(1, '是否死循环')
    if (Array.isArray(obj)) {
      return copyList(obj)
    } else {
      const result: any = {}
      for (const key in obj) {
        result[key] = deepclone(obj[key])
      }
      return result
    }
  } else {
    return obj
  }
}