相信看到这篇文章之前你应该多多少少了解过什么是深拷贝了为什么要什么拷贝了 这里就不介绍什么是深拷贝、浅拷贝了

最优解深拷贝方法：递归

这里为了方便直接在vue的页面里面演示了，在其他js文件中使用注意下this

  mounted() {
    const obj = {
      str: "字符串",
      num: 6,
      nu: null,
      reg: /^1[34578]\d{9}$/,
      children: {
        str: "字符串2",
      },
      fun() {
        console.log("函数");
      },
    };
    console.log(obj, "obj");
    let newObj = this.deepClone(obj);//调用递归函数传入需要拷贝的对象
    console.log(newObj, "newObj");
    obj.str = "修改后的字符串";
    const copyObj = obj;
    console.log(copyObj, "copyObj");//修改obj中的str之后copyObj中的str没有变化
  },

 

 

递归函数：

如果是普通js里面记得去掉this

    deepClone(obj) {
      if (typeof obj !== "object" || obj == null) {
        return obj;//如果传入的参数不是对象类型或者数组类型的数据直接返回原数据
      }
      let newObj = obj instanceof Array ? [] : {};//定义一个变量，当它是数组的时候赋予初始值空对象否则为空对象
      for (let key in obj) {//使用for in循环遍历是因为他不仅可以遍历数组还能遍历对象
        if (obj.hasOwnProperty(key)) {//使用对象.hasOwnProperty方法判断是否为对象自身的属性而非原型上的属性
          newObj[key] = this.deepClone(obj[key]);//将传入的对象参数递归调用赋值给新的对象，
          //此处直接递归调用不用判断是因为在深拷贝函数里面已经判断过,如果传入参数不是对象深拷贝函数将直接返回原数据，否则将继续递归赋值
        }
      }
      return newObj;
    },

对象里面没有函数、正则等一些特殊数据的情况下使用简单的深拷贝方法：

JSON.parse(JSON.stringify())

let jsonDeepClone = JSON.parse(JSON.stringify(obj))
    console.log(jsonDeepClone);