浅拷贝和深拷贝

浅拷贝

浅拷贝指只是复制了原数据源的第一层键值，如果第一层包含对象，则只能复制该对象的引用地址

    // 浅拷贝
    function shallowCopy(obj1, obj2) {
      for(var key in obj1) {
        obj2[key] = obj1[key]
      }
    }

    // 对象的浅拷贝
    let obj1 = {
      a: '1',
      b: '2',
      c: {
        name: 'gf'
      }
    }
    let obj2 = {}
    shallowCopy(obj1, obj2) //将obj1的数据拷贝到obj2
    obj2.c.name = 'gf2'
    console.log(obj1) // {a: "1", b: "2", c: {name: 'gf2'}}
    console.log(obj2) // {a: "1", b: "2", c: {name: 'gf2'}}

效果如图：

深拷贝

深拷贝是指完整的拷贝一个对象，拷贝的新值与原数据源互相分离，修改原数据源也不会修改拷贝后的值

function deepClone(sourceData) {
      // 判断源数据类型，是Array还是Obj
      let targetData = Array.isArray(sourceData) ? [] : {}
      // for in 循环遍历源数据
      for(let i in sourceData) {
        // 判断i是否源数据的自有属性，而不是继承原型链而来
        if (sourceData.hasOwnProperty(i)) {
          // Object.prototype.toString.call()用来判断数据的真实类型，slice(8, -1)截取数据判断部分，当是Obj的时候递归下一层进行赋值
          if (Object.prototype.toString.call(sourceData[i]).slice(8, -1) === 'Object') {
            targetData[i] = deepClone(sourceData[i])
          } else {
          // 非Obj的数据直接赋值
            targetData[i] = sourceData[i]
          }
        }
      }
      return targetData
    }
    let gfObj = {
      a: 1,
      b: 2,
      c: {
        d: 2,
        e: { 
          f: 100
        },
        g: [1,2,3]
      }
    }
    let newObj = deepClone(gfObj)
    gfObj.c.e.f = 200
    console.log(newObj)

效果如图：