有关于js的深拷贝和浅拷贝
关于基本数据类型以及复杂数据类型的存储方式有所不同
- 基本数据类型的特点是将数据直接储存在栈中
- 复杂数据类型的特点是栈中存储的是对象的指针(地址),真实的数据存储在堆中,通过栈中的地址来获取堆中的数据
有关于深拷贝和浅拷贝必须明白
浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象
浅拷贝拷贝引用数据类型,只拷贝第一层,深层值指向的是堆中原数据的地址,而深拷贝的整个原对象的值赋给新对象。
和元数据是否指向同一对象 | 第一层数据为基本数据类型 | 原数据中包含子对象 | |
---|---|---|---|
赋值 | 是 | 改变会使原数据一同改变 | 改变会使原数据一同改变 |
浅拷贝 | 否 | 改变不会使原数据一同改变 | 改变会使原数据一同改变 |
深拷贝 | 否 | 改变不会使原数据一同改变 | 改变不会使原数据一同改变 |
对于对象中的深拷贝和浅拷贝
深拷贝
深拷贝:深拷贝等同于将要被拷贝的对象完全复制一份然后给另一个变量
使用**JSON.parse(JSON.stringify(arr))**方法实现深拷贝
let arr = [1,2,{
name:'zhangsan',
age:18
}
]
let arr1 = JSON.parse(JSON.stringify(arr))
arr1[0] = 100
arr1[2].name = 'lisa'
console.log(arr1);
console.log(arr);
使用JQ库中的$.extend方法,其中的布尔值表示是否进行深度合并(true为深拷贝,false是浅拷贝)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<script>
var obj = {
a: 1,
b: {
f: {
g: 1
}
},
c: [1, 2, 3]
};
var obj1 = $.extend(true, {}, obj);
console.log(obj.b.f === obj1.b.f); // false
obj1.a = 2;
obj1.b.f.g = 2;
console.log(obj);
console.log(obj1);
</script>
</body>
</html>
浅拷贝
浅拷贝:将引用数据类型的地址赋给新变量,更改新变量后原数据也会跟着改变
var obj = {
name: 'xiaoming',
age: 18,
sex: 'male',
say: function(){
console.log('hello world');
}
}
var obj1 = obj
obj1.name = 'xiaohong'
console.log(obj1);
有关于实现浅拷贝有两种方法:
- 使用for in只循环第一层
- 使用Object.assign()方法
语法:Object.assign(target, source1, source2)
object.assign方法的第一个参数是目标(多个对象中的属性都保存到第一个里面)对象,后面的参数都是源对象
var obj = {
name: 'xiaoming',
age: 18,
sex: 'male',
friend:{
name: 'xiaoqiang',
age: 18,
sex: 'male'
}
}
// 浅拷贝 使用for in 遍历数据第一层
function shallowCopy(obj){
var newObj = {}
for(var key in obj){
newObj[key] = obj[key]
}
return newObj
}
var obj2 = shallowCopy(obj)
obj2.name = 'xiaohong'
console.log(obj2,'2');
// 浅拷贝 使用assign方法
var obj3 = Object.assign({},obj)
obj3.name = 'xiaohong'
obj3.friend.age = 109
console.log(obj3,'3');
console.log(obj,'3');
其中直接使用 = 赋值的方法即不属于浅拷贝,也不属于深拷贝
var obj = {
name: 'xiaoming',
age: 18,
sex: 'male',
friend:{
name: 'xiaoqiang',
age: 18,
sex: 'male'
}
}
var obj1 = obj
obj1.name = 'xiaohong'
obj1.friend.age = 12
console.log(obj1,'1');
console.log(obj,'1');