js深拷贝、js使用递归实现深拷贝

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

方法一：递归（最优解深拷贝方法）

优点：可以多层级拷贝，可以拷贝复杂数据类型

缺点：需要封装方法使用

这里为了方便直接在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没有变化
  },

递归函数：

因为我是在vue里面写的所以使用的时候记得去掉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())

优点：使用简单无需封装，可直接使用，可以深拷贝多层级对象

缺点：不适用于对象中有复杂数据的情况

通过对比可以看见函数进行JSON拷贝后直接消失了，而正则也变成了一个空对象，由此可见存在这些数据类型的时候JSON.parse(JSON.stringify())是不起作用的，

    let jsonDeepClone = JSON.parse(JSON.stringify(obj))//
    obj.str = 'JSON字符串'
    obj.children.str = '多层对象字符串'
     console.log(obj,'obj');
     console.log(jsonDeepClone,'jsonDeepClone');

 方法三：Object.assign({},obj)

优点：使用简单，无需封装，可直接使用，可以深拷贝复杂数据

缺点：无法进行多层级对象的深拷贝

    // 使用Object.assign方法拼接空对象
    let assignDeepClone = Object.assign({},obj)//此处注意需要拷贝的对象一定要放后面否则不生效
    obj.str = 'concat字符串';
    obj.children.str = '多层对象字符串'
    console.log(obj,'obj');
    console.log(assignDeepClone,'assignDeepClone');