JS的深浅拷贝

1.深浅拷贝的定义

简单的说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝;如果B没变,那就是深拷贝

在js中,深浅拷贝指的对对象或者数组的一种复制形式,我们说的深浅拷贝就不考虑基本数据类型了。因为基本数据类型没有引用地址。就是把一个对象或者数组中的数据完完整整的复制一份。放到另一个对象或者数组中,之后这两个对象或者数组之间没有任何联系。也就是说修改一个里面的值,不会影响到另一个里面的内容的改变

复制有三个过程:复制、浅拷贝、深拷贝。

 

2.栈堆、基本数据类型、引用数据类型

栈堆:存放数据的地方

基本数据类型:number,string,boolean,null,undefined

引用数据类型:function,Array,object

tips:基本数据类型保存在栈内存,引用类型保存在堆内存中。根本原因在于保存在栈内存的必须是大小固定的数据,引用类型的大小不固定,只能保存在堆内存中,但是可以把它的地址写在栈内存中以供我们访问。

3.赋值

  • 就是把一个值赋值给另一个。
  • 如果是基本数据类型,赋值完毕以后,两个数据之间没有影响。
  • 如果是复杂数据类型。赋值完毕后,修改其中的一个,另一个也会发生变化。就是因为他们指向了同一个存储空间

4.浅拷贝:

  浅拷贝不考虑基本数据类型。创建一个一模一样的数据类型,把你要拷贝的那个对象或者数组中的数据复制到另一个对象或者数组中。浅拷贝只能拷贝第一层的数据。因为只有一层结构的时候,一定是基本数据类型,当出现多层的时候,一定会有复杂数据类型,这个时候是不能完完整整的复制的,修改其中的一个,另一个也会受影响。

for (let k in o1) {
o2[k] = o1[k];
}
console.log(o1, o2);
o2.age = 22;
console.log(o1, o2);

 

5.深拷贝:

  • 深拷贝不考虑基本数据类型
  • 首先也是要准备一个一模一样的空数据类型。
  • 把你要拷贝的那个对象或者是数组中的数据赋值到另一个对象或者数组中
  • 深拷贝的核心:递归
//深拷贝1:利用递归的方式
function deepCopy(o2, o1) {
for (let k in o1) {
if (Object.prototype.toString.call(o1[k]) === '[object Object]') {
o2[k] = {};
deepCopy(o2[k], o1[k]);
}
else if (Object.prototype.toString.call(o1[k]) === '[object Array]') {
o2[k] = [];
deepCopy(o2[k], o1[k]);
}
else {
o2[k] = o1[k];
}
}
}
deepCopy(o2, o1)
console.log(o1, o2);
o2.info.desc.message = 'today';
console.log(o1, o2);
//深拷贝2: JSON对象的parse和stringify都是深拷贝
let obj = {
name: 'cancan',
age: 24,
company: {
name: '阿里',
address: '杭州'
}
}
let obj_json = JSON.parse(JSON.stringify(obj));
console.log(obj === obj_json);
console.log(obj, obj_json);
obj_json.company.name = '腾讯';
obj_json.company.address = '北京'
posted @   码磊姐姐  阅读(119)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
历史上的今天:
2020-08-04 JQuery事件之文档/窗口事件
2020-08-04 JQuery事件之表单事件
2020-08-04 JQuery事件之键盘事件
2020-08-04 JQuery事件之鼠标事件
2020-08-04 JQuery选择器
2020-08-04 JQuery语法、JQuery和JS入口函数以及区别
2020-08-04 JQuery怎么安装使用
点击右上角即可分享
微信分享提示