当前位置: 首页 > news >正文

javascript中的浅拷贝和深拷贝

浅拷贝:拷贝的是引用类型数据的第一层:数组或者对象:的地址

深拷贝:通过不断的递归进行拷贝
 

原理普及:在js中引用类型的变量储存的时候引用类型数据的地址,因此当地址被重新赋值新的对象的时候,修改新的对象,实际上就等于修改了原来的对象。因此浅拷贝的出现就是开辟一个新的地址去拷贝原来对象的数据,这样修改的时候 就不会影响到原来的数据了。

但是因为浅拷贝只能深究到第一层,因此就有了深拷贝的出现。

浅拷贝:

    <script>// 浅拷贝    首先要知道深浅拷贝只针对引用数据类型// 浅拷贝拷贝的是引用类型的里面第一层的地址           储存空间中,有栈和堆 栈存放地址 堆存放内容// 实现浅拷贝有两种方式 第一种类似于解构const obj = {name:"ddd",age:18,hobby:"basketball",body:{foot:"foot",head:"head"}}const o = {...obj}console.log(o);console.log(obj);o.age = 20console.log(o);console.log(obj);// 第二种方式实现浅拷贝 Object.assgin()   const obj2 = {name:"ddd",age:18,hobby:"basketball",body:{foot:"foot",head:"head"}}const o2 = {}Object.assign(o2,obj2)console.log(o2);console.log(obj2);
// 如果是数组 两种方法 对应就是[...xxx]和.concat()</script>

深拷贝:

 <script>// const obj = {//     name:"ddd",//     age:20,//     hobby:["项目1","项目2"]// }// const o = {// }// function deepCopy (newObj,oldObj) {//     // k是属性名 oldObj[k]属性值//     for(let k in oldObj){//         // 处理数组的问题//         if(oldObj[k] instanceof Array){//             newObj[k] = []//             // 这里有点难理解 newObj[k]就是hobby数组 然后对这个数组进行操作//             deepCopy (newObj[k],oldObj[k])//         }else{//             newObj[k] = oldObj[k]//         }//     }// }// deepCopy(o,obj) //o是新对象 obj是旧对象// console.log(o);// // 如果我修改了新对象里面的数组或者对象 新旧同时也会被修改 所以没有达到拷贝的效果 引用类型还是把地址拿来了// console.log(obj);// 第二种方式实现深拷贝//  然后引入// <script src="xxxx"><script>//  const obj = {//     name:"ddd",//     age:20,//     hobby:["项目1","项目2"]// }// const o = _.cloneDeep(obj)// console.log(o)//第三种方式深拷贝  JSONconst obj = {name:"ddd",age:20,hobby:["项目1","项目2"]}// 把对象转换为json字符串JSON.stringify(obj)console.log(JSON.stringify(obj));// JSON.parse(JSON.stringify(obj))   又把json字符串转换为了对象 但是这个时候的对象 等于在空间有开辟了一个新的地址 const o = JSON.parse(JSON.stringify(obj))//完美实现深拷贝console.log(o);o.hobby.push("dddddd")console.log(o);console.log(obj);</script>

http://www.lryc.cn/news/330681.html

相关文章:

  • vue 实现自定义分页打印 window.print
  • 基于 Erlang 的随机账户分配机制
  • 数码论坛系统的设计与实现|Springboot+ Mysql+Java+ B/S结构(可运行源码+数据库+设计文档)电子科技数码爱好者交流信息新闻畅聊讨论评价
  • 时序预测 | Matlab实现CPO-LSTM【24年新算法】冠豪猪优化长短期记忆神经网络时间序列预测
  • 探索设计模式的魅力:AI大模型如何赋能C/S模式,开创服务新纪元
  • 2024年NAND价格市场继续上涨
  • 分布式算法 - ZAB算法
  • Java设计之道:色即是空,空即是色
  • 深度学习:基于PyTorch的模型解释工具Captum
  • 公司官网怎么才会被百度收录
  • 机器学习模型——SVM(支持向量机)
  • 服务器CPU使用过高的原因
  • 基于tensorflow和kereas的孪生网络推理图片相似性
  • day4|gin的中间件和路由分组
  • nodejs的express负载均衡
  • 计算机网络-HTTP相关知识-RSA和ECDHE及优化
  • axios 封装 http 请求详解
  • 牛客2024年愚人节比赛(A-K)
  • loadbalancer 引入与使用
  • Yolov5封装detect.py面向对象
  • 入门级深度学习主机组装过程
  • python爬虫之selenium4使用(万字讲解)
  • 【ARM 嵌入式 C 头文件系列 22 -- 头文件 stdint.h 介绍】
  • LabVIEW专栏三、探针和断点
  • Transformer模型-softmax的简明介绍
  • 记录一下做工厂的打印pdf程序
  • Linux网络编程一(协议、TCP协议、UDP、socket编程、TCP服务器端及客户端)
  • Python读取Excel根据每行信息生成一个PDF——并自定义添加文本,可用于制作准考证
  • http: server gave HTTP response to HTTPS client 分析一下这个问题如何解决中文告诉我详细的解决方案
  • Flume学习笔记