本文部分内容来自https://www.cnblogs.com/echolun/p/7889848.html
昨天学习ES6的Object.assign()的时候,发现Object.assign进行的拷贝是浅拷贝,及只有第一层是深拷贝。若拷贝的属性的值是对象的复合属性,就只是拷贝过来一个引用。
const obj1 = {'a': {'b': 1}}
const obj2 = Object.assign({}, obj1)
obj1.a.b = 2
obj2.a.b // 2
首先,先了解基本数据类型和引用数据类型。
基本数据类型:string、number、boolean、undefined、null
引用数据类型:object、array、function
(1)基本类型---名值存储在栈内存中,例如 let a = 1
当b = a时:
栈内存开辟了一个新内存,所以修改a的值时,b的值并不会随之变化。但这也算不上深拷贝,因为深拷贝本身只针对较为复杂的object类型数据。
(2)引用数据类型--名存在栈内存中,值存在于堆内存中,但是栈内存会提供一个引用的地址指向堆内存中的值
当b=a进行拷贝时,其实复制的是a的引用地址,而并非堆里面的值
而当我们 a[0]=1 时进行数组修改时,由于a与b指向的是同一个地址,所以自然b也受了影响,这就是所谓的浅拷贝了。
要是在堆内存中也开辟一个新的内存专门为b存放值,就像基本类型那样,起步就达到深拷贝的效果了
(1)递归去复制所有层级属性
function deepClone(obj) {
let objClone = Array.isArray(obj) ? [] : {}
if (obj && typeof obj === 'object') {
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
// 判断obj子元素是否为对象,如果是,递归复制
if (obj[key] && typeof obj[key] === 'object') {
objClone[key] = deepClone(obj[key])
} else {
objClone[key] = obj[key]
}
}
}
}
return objClone
}
let a = [1,2,3,4]
let b = deepClone(a) // [1,2,3,4]
a[0] = 2 // [2,2,3,4]
b // [1,2,3,4]
那是不是说slice方法也是深拷贝了,毕竟b也没受a的影响,上面说了,深拷贝是会拷贝所有曾经的属性,还是这个例子,我们把a改改
let a = [0,1,[2,3],4]
let b = a.slice()
a[0] = 1
a[2][0] = 1 // [1,1,[1,3],4]
b // [0,1,[1,3],4]
拷贝的不彻底啊,b对象的一级属性确实不受影响了,但是二级属性还是没能拷贝成功,仍然脱离不了a的控制,说明slice根本不是真正的深拷贝。
这里引用知乎问答里面的一张图
第一层的属性确实深拷贝,拥有了独立的内存,但更深的属性却仍然公用了地址,所以才会造成上面的问题。
同理,concat方法与slice也存在这样的情况,他们都不是真正的深拷贝,这里需要注意。
(2)用JSON对象的parse和stringify
function deepClone (obj) {
let _obj = JSON.stringify(obj)
let objClone = JSON.parse(_obj)
return objClone
}
let a = [0,1,[2,3],4]
let b = deepClone(a)
a[0] = 1
a[2][0] = 1 // [1,1,[1,3],4]
b // [0,1,[2,3],4]
(3)JQ的extend方法
JQ里有extend方法也可以拷贝对象。
$.extend([deep ], target, object1 [, objectN ])
deep表示是否深拷贝,为true为深拷贝;为false,为浅拷贝。
target Object类型 目标对象,其他对象的成员属性将被附加到该对象上。
object1 objectN可选。 Object类型 第一个以及第N个被合并的对象。
let a = [0,1,[2,3],4]
let b = $.extend(true, [], a)
a[0] = 1
a[2][0] = 1 // [1,1,[1,3],4]
b // [0,1,[2,3],4]