复合数据类型进行深拷贝浅谈

Posted 2020-10-31 木石心

复合数据类型进行深拷贝浅谈

最近做项目时，碰到用到复合数据类型进行对比，需要保留最开始的值和最后的值进行对比，用到深拷贝，正好好好总结一下

虽有javascript没有堆栈的说法，但是却一直被应用。开始进入分析，剖析

数组进行深拷贝

let arr = [1, 2, 3, 4, ‘sinosaurus‘]

• 1.使用slice

  let newArr = arr.slice(0)
  console.log(newArr) //   [1, 2, 3, 4, "sinosaurus"]
  newArr[0] = 77  
  console.log(newAr) //  [77, 2, 3, 4, "sinosaurus"]
  console.log(arr)  //   [1, 2, 3, 4, "sinosaurus"]

• 1. 使用es6扩展运算符结合解构赋值

     let [...newArr1] = arr
     console.log(newArr1)  // [1, 2, 3, 4, "sinosaurus"]
     newArr1[0] = 77
     console.log(newArr1)  // [77, 2, 3, 4, "sinosaurus"]
     console.log(arr)      // [1, 2, 3, 4, "sinosaurus"]

若是数组变复杂了，则数组的方法无法解决

let arr = [{s: ‘当时明月在，曾照彩云归‘, zhen: ‘两个黄鹂鸣翠柳，我还没有女朋友‘}]

若是继续使用刚才的方法，会发现修改数组中对象的值，会影响其他的原始的数据，牵一发而动全身，因而考虑换其他方法

let [...newArr] = arr
console.log(newArr) //  [{s: ‘当时明月在，曾照彩云归‘, zhen: ‘两个黄鹂鸣翠柳，我还没有女朋友‘}]
newArr.zhen = ‘十年生死两茫茫，不思量，自难忘‘
console.log(newArr)  // [{s: ‘当时明月在，曾照彩云归‘, zhen: ‘十年生死两茫茫，不思量，自难忘‘}]
console.log(arr)     // [{s: ‘当时明月在，曾照彩云归‘, zhen: ‘十年生死两茫茫，不思量，自难忘‘}]
//另一个方法依旧如此

因而考虑其他方式

• 封装函数 (这种才算的上真正意义上的深拷贝) 虽然是复合数据类型，但是最终还是不同的简单数据类型进行结合的

  function deepCopy(o1, o2) {
  //判断顺序， 数组 ==> 对象==> 浅拷贝
  for (let key in o1) {
    if (o1[key] instanceof Array) {
      o2[key] = []
      deepCopy(o1[key], o2[key])
    } else if (o1[key] instanceof Object) {
      o2[key] = {}
      deepCopy(o1[key], o2[key])
    } else {
      o2[key] = o1[key]
    }
  }
  }
  let newArr2 = []
  deepCopy(arr, newArr2)
  console.log(newArr2) // [{s: ‘当时明月在，曾照彩云归‘, zhen: ‘两个黄鹂鸣翠柳，我还没有女朋友‘}]
  newArr2[0] = ‘十年生死两茫茫，不思量，自难忘‘
  console.log(newArr2) // [{s: ‘当时明月在，曾照彩云归‘, zhen: ‘十年生死两茫茫，不思量，自难忘‘}]
  console.log(arr)     // [{s: ‘当时明月在，曾照彩云归‘, zhen: ‘两个黄鹂鸣翠柳，我还没有女朋友‘}]

• 利用JSON的方法

  let newArr3 = JSON.parse(JSON.stringify(arr))
  console.log(newArr3)  // [{s: ‘当时明月在，曾照彩云归‘, zhen: ‘两个黄鹂鸣翠柳，我还没有女朋友‘}]
  newArr3[0] = ‘十年生死两茫茫，不思量，自难忘‘
  console.log(newArr3)  // [{s: ‘当时明月在，曾照彩云归‘, zhen: ‘十年生死两茫茫，不思量，自难忘‘}]
  console.log(arr)      // [{s: ‘当时明月在，曾照彩云归‘, zhen: ‘两个黄鹂鸣翠柳，我还没有女朋友‘}]