【JS】深拷贝与浅拷贝

深拷贝和浅拷贝都是处理对象或数据的复制操作

浅拷贝

• 浅拷贝创建一个的对象，复制的是原对象的引用
• 新对象与原对象共用一个相同的内存地址，因此改变新对象也会影响原对象。

实现浅拷贝的方法

扩展运算符

扩展运算符可以实现单层深拷贝，改变新对象不会影响原对象，但如果对象中的属性值是引用类型，发生改变会影响原对象

    let obj = {
        "name": "zs",
        "age": 20,
        "children": { 'name': 'ls', 'age': 10 }
    }
    // 扩展运算符实现浅拷贝
    let ShallowCopy = { ...obj }
    ShallowCopy.children.name = "ww";//两个对象children.name都变成ww
    ShallowCopy.age = 19//只有新对象的age会改变
    console.log(obj);
    console.log(ShallowCopy);

深拷贝

• 浅拷贝会创建一个新的对象，复制的是原对象的值
• 新对象与原对象有不同的内存地址，因此两个对象之间相互独立，发生改变也会不影响

实现深拷贝的方法

递归

var obj = {
      obj_1: {
        age: 20,
      },
      arr: [1, 2, 3],
    }
    var newObj = {}
    function deepCopy(obj, newObj) {
      for (key in obj) {
        if (obj[key].constructor == Array) {
          newObj[key] = []
          recursion(obj[key], newObj[key])
        } else if (obj[key].constructor == Object) {
          newObj[key] = {}
          recursion(obj[key], newObj[key])
        }else {
            newObj[key] = obj[key]
        }
      }
    }
    deepCopy(obj, newObj)//函数调用
    //进行验证，改变newObj中的age不影响obj中的age
    newObj.obj_1.age = 18
    console.log(newObj)
    console.log(obj);

JSON.parse(JSON.stringify())

• 原理：用 JSON.stringify 将对象转成 JSON 字符串，再用 JSON.parse()把字符串解析成新的对象。

    let obj = {
        "name": "zs",
        "age": 20,
        "sex": "man"
    }
    let newObj = JSON.parse(JSON.stringify(obj))
    obj.age = 30;
    console.log(obj);
    console.log(newObj);