复合数据类型进行深拷贝浅谈
最近做项目时,碰到用到复合数据类型进行对比,需要保留最开始的值和最后的值进行对比,用到深拷贝,正好好好总结一下
虽有
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"]
-
- 使用
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: '两个黄鹂鸣翠柳,我还没有女朋友'}]