JavaScript 深层拷贝的实现
在网上总是在看到 JS 的浅拷贝和深拷贝的文章, 今天在医院没事看了一个视频也是讲深层拷贝的东西, 浅拷贝和深拷贝是什么, 浅拷贝和深拷贝的区别在哪里呢? 这就是写文章的原因, 让自己能留下自己的理解, 也希望与大家交流. 提出自己的问题, 相互交流, 相互促进.
浅层拷贝
浅层拷贝就是对简单的没有嵌套引用类型的拷贝
- // Object clone
- var a = {key: 'value'}
- var b = Object(a,{})
- console.log(b.key) // 'value'
- b.key = 'nweValue'
- console.log(a.key) // 'value'
- // Array clone
- var arr = [1,2,3,4], newArray = []
- arr.forearch((value,index) => {
- newArray[index] = value
- })
上述代码可以看到对象和数组结构的浅层拷贝相对简单, 浅层拷贝就是一个对象的值赋值给另一个对象, 如何直接将一个对象赋值给另一个对象的话就是引用之间的赋值了.
此时 b.key 的变化其实改变的是 a.key 因为 b.key 的值是通过引用获取 a.key 值
深层拷贝
此文主要是说说深层拷贝的实现, 深层拷贝主要是引用类型之前的嵌套, 比如对象数组, 对象嵌套数组, 深层拷贝一般不考虑拷贝函数.
上图可以看出浅层拷贝就不能做到. 就需要通过遍历来判断是不是引用类型和具体什么类型, 然后进行递归处理
- function deepClone(to, from) {
- if (!to) {
- console.error(`Cannot convert undefined or null to object`)
- } else {
- if (from) {
- for(let i in from) {
- if (from.hasOwnProperty(i)) {
- const value = from[i]
- if (value && typeof value === 'object') {
- var temp = {}
- if (Array.isArray(value)) {
- temp = []
- }
- const prop = deepClone(temp, value)
- to[i] = prop
- } else {
- to[i] = from[i]
- }
- }
- }
- }
- }
- return to
- }
- var from = {
- num : 1,
- arr: [1,2,3],
- obj: {a: 'a', b: 'b', c: 'c'}
- }, to = {}
- console.log(deepClone(to, from))
- console.log('from:' + from.arr[0]) // 1
- console.log('to:' + to.arr[0]) // 1
- to.arr[0] = 4
- console.log('to:' + to.arr[0]) // 4
上述代码可以看到通过深层拷贝后的对象的值修改并不相互影响.
这就是我深层拷贝的实现. 如果有什么问题, 请不吝赐教.
来源: http://www.qdfuns.com/article/50158/391acf41af4ad501100ac46295f27f33.html