所谓浅拷贝和深拷贝,通俗点说就是B拷贝了A,如果改变A的值,B也改变了,那就是浅拷贝。如果B不变，那就是深拷贝。
- 基本数据类型:undefine,string,boolean,string,Null,这些值都是存在栈内存中的,可以直接访问
- 引用类型:值存放在堆内存里面,栈内存保存的是指向这个数据值的指针,当访问对象时,通过栈内存中的指针去寻找堆内存中的值
- 深拷贝：会开辟新的内存空间,递归拷贝对象中的引用,一直到子属性为基本数据类型
- 浅拷贝：拷贝的其实是栈内存中的指针,也就是引用地址,B拷贝A,拷贝的其实是A的引用地址而并非值
概念介绍完了,现在我们实现一下浅拷贝和深拷贝,有一说一深拷贝和浅拷贝只针对像 Object, Array 这样的复杂对象的
1.浅拷贝
/**
* 实现浅拷贝
*/
//只拷贝第一层属性
function fun_01(obj) {
var obj2 = Array.isArray(obj) ? [] : {}
for (let i in obj) {
obj2[i] = obj[i]
}
return obj2
}
var obj1 = {
a: 1,
b: 2,
c: {
d: 3
}
}
var obj2 = fun_01(obj1)
obj2.a = 4
obj2.c.d = 5
console.log(obj1.a); //1
console.log(obj1.c.d); //5
console.log(obj2.a); //4
console.log(obj2.c.d); //5
//Object.assign
var obj = {
a : 1 ,
b : 2
}
var obj1 = Object.assign(obj)
obj1.a = 3
console.log(obj.a); //3
//直接赋值
let a = [0,1,2,3,4]
var b = a
a[0] = 1
console.log(a,b);//[ 1, 1, 2, 3, 4 ] [ 1, 1, 2, 3, 4 ]
除了以上方法,还有
- 解构赋值
- 数组的slice()和concat()方法
- Lodash工具库中的clone()方法:_clone(value)
2. 深拷贝
/**
* 实现深拷贝
*/
//递归拷贝,一直拷贝到最后一层属性
function func_01(obj){
let obj1 = Array.isArray(obj)?[]:{}
if(obj && typeof obj === 'object'){
for(key in obj){
if(obj.hasOwnProperty(key)){
//判断obj[key]是否是对象，如果是，递归拷贝
if(obj[key]&&typeof obj[key] === 'object'){
obj1[key] = func_01(obj[key])
}else{
obj1[key] = obj[key]
}
}
}
}
return obj1
}
var a = [1,2,3,4]
var b = func_01(a)
a = [4,3,2,1]
console.log(a,b); //[ 4, 3, 2, 1 ] [ 1, 2, 3, 4 ]
- JSON.parse(),但是如果对象中有function,就不能拷贝,会显示undefined
- jQuery的extend方法
- Lodash工具库中的clone()方法:_cloneDeep(value)
-
