前端深拷贝实践

@[TOC](这里写自定义目录标题)

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

缘由是之前项目用到深拷贝，然后网上找了一个导致了项目的报错，然后想网上不靠谱，那就自己实现吧
然后发现貌似有一个工具库 npm i --save lodash，var deep = _.cloneDeep(objects)可以直接使用。
为什么要自己写呢？为了理解基础知识和面试能力（好多面试题手写深拷贝的），首先从基础版开始吧

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、基础版

const deepclone = (obj) =>{
  return JSON.parse(JSON.stringify(obj))
}

其实日常开发80%都够用了，但是面试不能总这么简单了

二、常用方法的缺点

1.JSON.parse(JSON.stringify(obj))这个方法有两个问题：

1.1 当对象中存在 新类型symbol、函数、日期、正则、undefined 时 会出问题

const arr = [
    { a: new Date()  },
    { b: new RegExp('\\w+')},
    { c: function() { console.log('aaa function') }},
    { d: undefined },
    { e: Symbol(42)}
]
const copyArr = JSON.parse(JSON.stringify(arr))
console.log(copyArr)
[
    {
        "a": "2022-09-09T08:16:03.131Z"
    },
    {
        "b": {}
    },
    {},
    {},
    {}
]

虽然我自己不会在对象写上面的类型，但是以上类型确实有问题，

1. 时间会直接变成当前时间string
2. 正则会变成 {}对象
3. 函数、新类型symbol、undefined 直接没了

1.2 当对象出现循环引用的时候，会报错

let obj1 = {};
let obj2 = { b: obj1};
obj1.a = obj2;

{b:
a:
b:
a:
b:
a:
b: {a: {…}}}
//其实我感觉循环引用就是，死循环的错误情况就不该出现
console.log(JSON.parse(JSON.stringify(obj1)));
//VM409:1 Uncaught TypeError: Converting circular //structure to JSON//
//    --> starting at object with constructor //'Object'
//   |     property 'a' -> object with constructor //'Object'
 //   --- property 'b' closes the circle
//    at JSON.stringify (<anonymous>)
//    at <anonymous>:1:29

2.这么解决这两个问题，改天再写吧

---

总结