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

js中的浅拷贝和深拷贝

浅拷贝Shallow Copy

浅拷贝只复制对象的顶层属性及其引用,而不复制这些引用所指向的对象。如果原始对象中的某个属性是一个对象或数组,那么浅拷贝后的对象将包含对这个内部对象或数组的引用,而不是这个对象或数组的一个新副本。

let obj1 = {  a: 1,  b: {  c: 2  }  
};  // 使用扩展运算符(...)进行浅拷贝  
let obj2 = { ...obj1 };  // 或者使用 Object.assign() 方法进行浅拷贝  
// let obj2 = Object.assign({}, obj1);  console.log(obj2); // { a: 1, b: { c: 2 } }  // 修改 obj2 的顶层属性 a  
obj2.a = 2;  
console.log(obj1.a); // 1,obj1 的 a 属性没有被修改  // 修改 obj2 的 b 属性(这是一个对象的引用)  
obj2.b.c = 3;  
console.log(obj1.b.c); // 3,obj1 的 b.c 属性也被修改了,因为 obj1 和 obj2 的 b 属性指向同一个对象

深拷贝

深拷贝会复制对象及其所有子对象,直到最底层的基本数据类型。这意味着深拷贝后的对象与原始对象是完全独立的,修改其中一个对象不会影响另一个对象。

let obj1 = {  a: 1,  b: {  c: 2  }  
};  // 使用 JSON 方法进行深拷贝(注意:这种方法有局限性)  
let obj2 = JSON.parse(JSON.stringify(obj1));  // 或者使用 lodash 的 _.cloneDeep() 方法进行深拷贝  
// let _ = require('lodash');  
// let obj2 = _.cloneDeep(obj1);  console.log(obj2); // { a: 1, b: { c: 2 } }  // 修改 obj2 的顶层属性 a  
obj2.a = 2;  
console.log(obj1.a); // 1,obj1 的 a 属性没有被修改  // 修改 obj2 的 b 属性(虽然它们看起来相同,但实际上是两个独立的对象)  
obj2.b.c = 3;  
console.log(obj1.b.c); // 2,obj1 的 b.c 属性没有被修改,因为 obj1 和 obj2 的 b 属性指向不同的对象

总结

浅拷贝就是复制对象的顶层属性即第一层属性,而深拷贝是复制对象的所有属性。所以浅拷贝修改第二层及以后属性时,也还是会影响原对象。深拷贝完全不被影响。

使用浅拷贝
// 使用扩展运算符(...)进行浅拷贝  
let obj2 = { ...obj1 };  // 或者使用 Object.assign() 方法进行浅拷贝  
let obj2 = Object.assign({}, obj1);  
使用深拷贝
// 使用 JSON 方法进行深拷贝(注意:这种方法有局限性)  
let obj2 = JSON.parse(JSON.stringify(obj1));  // 或者使用 lodash 的 _.cloneDeep() 方法进行深拷贝  
let _ = require('lodash');  
let obj2 = _.cloneDeep(obj1);  

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

相关文章:

  • 【Linux】常用基本命令
  • uniapp——上传图片获取到file对象而非临时地址——基础积累
  • vue3 antdv RadioButton默认值选择问题处理
  • 最佳实践,一款基于 Flutter 的桌面应用
  • python第一个多进程爬虫
  • 在Ubuntu 18.04上安装和配置Ansible的方法
  • 【详细教程】如何使用YOLOv10进行图片与视频的目标检测
  • LLM大语言模型-AI大模型全面介绍
  • 瑜伽馆管理系统的设计
  • JAVA【案例5-2】模拟默认密码自动生成
  • 小区业主管理系统
  • vncsever ,window 远程ubuntu远程界面安装方式,VNC Viewer安装教程+ linux配置server 操作
  • java spring boot 单/多文件上传/下载
  • C语言的内存函数
  • 【网络通信】计算机网络安全技术总结
  • Redis-实战篇-什么是缓存-添加redis缓存
  • 《妃梦千年》第十一章:再遇故人
  • 反序列化底层学习
  • 项目训练营第五天
  • 数据收集和数据分析
  • Kubernetes(K8s)从入门到精通系列之十九:Operator模式
  • vuex的actions返回结果类型是promise及actions方法互相调用
  • 【干货】Jupyter Lab操作文档
  • iOS分享到微信,配置Universal Links,并从微信打开app,跳转到指定界面
  • 基于SSM构建的校园失眠与压力管理系统的设计与实现【附源码】
  • SAP 初始化库存移动类型561501511区别简介
  • 情感搞笑聊天记录视频:AI自动化生成技术,操作简单,教程+软件
  • RabbitMQ中lazyqueue队列
  • Java三层框架的解析
  • 算法设计与分析 笔记