当前位置:网站首页>【js】浅拷贝与深拷贝
【js】浅拷贝与深拷贝
2022-07-19 05:05:00 【one or only】
一、理解
1、浅拷贝:只是拷贝一层,更深层次对象级别的只拷贝了地址。
浅拷贝的时候如果数据是基本数据类型,那么就如同直接赋值那种,会拷贝其本身,如果除了基本数据类型之外还有一层对象,那么对于浅拷贝而言就只能拷贝其引用,对象的改变会反应到拷贝对象上。
2、深拷贝:深拷贝就会拷贝多层,即使是嵌套了对象,也会都拷贝出来,内容和原对象一样,更改原对象,拷贝对象不会发生变化。
二、浅拷贝
1.用Js实现浅拷贝
var obj = {
id:1,
name:'Andy',
msg: {
age:18
}
}
var newObj = {}
for(var key in obj) {
//key是当前属性名, obj[k]是当前属性值
newObj[key] = obj[key]
}
console.log(newObj)
从打印结果我们可以看出已经成功将obj的属性已经值拷贝进了newObj,但是我们应该意识到:obj.msg.age与newObj.msg.age他们引用的是同一个地址的数据,换句话说,newObj.msg只拷贝了obj.msg的地址 。
2. 浅拷贝语法糖
ES6新增方法 assign
可以快速实现浅拷贝
2.1 写法
Object.assign(target, ...sources)
- target:要拷贝给谁
- source:要拷贝的对象
2.2 应用
var obj = {
id:1,
name:'Andy',
msg: {
age:18
}
}
var newObj = {}
Object.assign(newObj,obj) //把obj浅拷贝给newObj
总结:浅拷贝如果遇到更深层次的数据(如:对象、数组这类引用类型数据),只是拷贝了地址。
三、深拷贝
1.用Js实现深拷贝
var obj = {
id:1,
name:'Andy',
msg: {
age:18
},
color:['pink','red']
}
var newObj = {}
//封装函数
function deepCopy(newObj,obj) {
for(var key in obj) {
//判断属性值属于哪种数据类型
//属性值 obj[key]
//1.判断这个值是否为数组(数组也属于特殊对象,也是引用类型数据)
if(obj[key] instanceof Array) {
newObj[key] = []
deepCopy(newObj[key],obj[key]) //运用递归,把原对象属性值给新对象
//判断这个值是否为对象
} else if(obj[key] instanceof Object) {
newObj[key] = {}
deepCopy(newObj[key],obj[key]) //运用递归,把原对象属性值给新对象
} else {
//若是普通数据类型
newObj[key] = obj[key]
}
}
}
deepCopy(newObj,obj)
遍历原对象,检查每个属性值都属于什么数据类型:若是简单数据类型,直接赋值;若是复杂数据类型的(数组、对象),我们先来判断属于哪种复杂数据类型,接着我们进入里面利用递归的方式,把里面的值取出来再进行赋值操作。
值得一提的是:判断条件是否为数组、是否为对象这两个不能颠倒,因为若先判断是否为对象,那么数组也会进入该判断,因为数组为“特殊对象”。
边栏推荐
猜你喜欢
随机推荐
The wonderful use of enum and the cleverness of the union to save space
学习日记5-C语言函数的应用
Pytorch target detection data processing (II) extracting difficult samples, low AP samples
C language structure type
Pytorch implements the use of data enhancement classification evaluations
【学习笔记】Solid Works 作业记录
【学习笔记】Unreal(虚幻)4引擎入门(四)
91-弹框案例——父传子——子传父
Pytorch implements retinanet (III) definition and training of loss
What if the game needs to be reinstalled after the steam folder is moved
通过调试发现程序死循环的原因
C language custom types: structure, enumeration, union
Implementation of pytorch data enhancement cutmix
ES6之Object.defineProperty 和 Proxy 区别
轻松掌握|struct结构体|知识点
scroll案例:带有动画的返回顶部
Eight queens problem, second understand recursive backtracking (illustrated | C language)
三子棋(N子棋)C语言编程实现,超详细讲解
Shell Scripting
92-兄弟组件间的传值问题