1、JSON.stringify()实现对象的深拷贝

官网上解释说明的是序列化对象类型（指的将对象转为字符串类型）
直接复制原始对象所有数据，并脱离原始对象；不会对原始对象造成影响；需要注意的事项：以下类型key对象会失丢；

• function函数类型
• undefined数据类型
• Symbol()数据类型

      let obj = {
        name: "xiaochen",
        age: 20,
      };
      let copy_obj = JSON.parse(JSON.stringify(obj));
      obj.age = 30;
      console.log("初始对象: ", obj);
      console.log("深拷贝之后的对象: ", copy_obj);

image.png
深拷贝将原始对象的所有数据全部拷一份单独弄出来，这样修改原对象，就不会对初始数据进行修改，这种深拷贝方式之前我一直用于表单的编辑操作，因为vue中数据是双向绑定的，不进行拷贝操作的话，直接修改表单，表单外展示的数据也会同样的被修改掉，但是这个深拷贝的方式是有弊端的，有些类型会被直接过滤掉。
示例：

      let obj = {
        name: "xiaochen",
        age: 20,
        userId: Symbol("id"),
        custom: undefined,
        fn() {
          console.log("测试深拷贝函数类型");
        },
      };

      let copy_obj = JSON.parse(JSON.stringify(obj));
      obj.age = 30;
      console.log("初始对象: ", obj);
      console.log("深拷贝之后的对象: ", copy_obj);

image.png

2、使用递归方式去实现深拷贝

深拷贝的函数方法：

deepCopy(object) {
  // 判断当前传入的类型
  let copyObj = object.construct === "Array" ? [] : {};
   for (let keys in object) {
     copyObj[keys] =object[keys] && typeof object[keys] === "object" ? deepCopy(object[keys]) : object[keys];
   }
   return copyObj;
},

修改原对象数据并掉起深拷贝函数：

let obj = {
   name: "xiaochen",
   age: 20,
   userId: Symbol("id"),
   custom: undefined,
   fn() {
    console.log("测试深拷贝函数类型");
   },
   };
let copy_obj = this.deepCopy(obj);
obj.age = 30;
console.log("初始对象: ", obj);
console.log("深拷贝之后的对象: ", copy_obj);

image.png

这样就解决了JSON.stringify()的局限性

3、对象的浅拷贝

只是单纯的复制原始对象的第一层数据，第二层及以下数据还是原始数据对象的引用，浅拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。

// 数组
const arr = [1, 2, 3]
const arrCopy = [...arr]

// 对象
const obj = { a: 1 }
const objCopy = { ...obj }