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.mfbz.cn/a/744687.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

HTML+CSS 彩色浮雕按钮

效果演示 实现了一个彩色按钮特效,包括一个按钮(button)和一个前景色(::before)。按钮具有四种不同的颜色,当鼠标悬停在按钮上时,前景色会出现渐变效果,并且按钮的颜色、文本阴影和边…

04 Shell编程之正则表达式与文本处理器

目录 4.1 正则表达式 4.1.1 正则表达式概述 1. 正则表达式的定义 2. 正则表达式用途 4.1.2 基础正则表达式 1. 基础正则表达式示例 1. 查找特点字符 2. 利用中括号"[]"来查找集合字符 3. 查找行首"^"与行尾字符"$" 4. 查找任意一个字符".&…

供应链攻击是什么?

随着企业对技术和连接性的依赖日益增加,以及对第三方的普遍依赖,供应链攻击变得越来越普遍。这些攻击旨在通过供应商和商业伙伴损害企业。 供应链攻击可能对企业和组织构成重大威胁,因为它们可能危及它们的安全以及向客户提供的产品和服务的…

算法训练营day19--530.二叉搜索树的最小绝对差+501.二叉搜索树中的众数+236. 二叉树的最近公共祖先

一、530.二叉搜索树的最小绝对差 题目链接:https://leetcode.cn/problems/minimum-absolute-difference-in-bst/ 文章讲解:https://programmercarl.com/0530.%E4%BA%8C%E5%8F%89%E6%90%9C%E7%B4%A2%E6%A0%91%E7%9A%84%E6%9C%80%E5%B0%8F%E7%BB%9D%E5%AF…

基于KNN的旋转机械故障诊断(MATLAB)

KNN算法又称K-近邻算法,其主要思想是:对于要分类的样本按照一定的相似性度量方法寻找与之最近的K个邻居,计算这K个邻居中类别出现次数最多的那个类作为该样本所属类。其算法步骤如下。 (1)计算待分类样本与训练集中各个数据之间的距离。 (2…

React 19 新特性集合

前言:https://juejin.cn/post/7337207433868197915 新 React 版本信息 伴随 React v19 Beta 的发布,React v18.3 也一并发布。 React v18.3相比最后一个 React v18 的版本 v18.2 ,v18.3 添加了一些警告提示,便于尽早发现问题&a…

数学建模--Matlab操作与运算

目录 1.点运算 2.文件介绍 (1)文件分类 (2)温度转换 (2)函数调用 (3)建模经验 (4)注意事项 (5)多个返回值情况 (6…

离线部署OpenIM

目录 1.提取相关安装包和镜像 2.安装docker和docker-compose 3.依次导入镜像 4.解压安装包 5.执行安装命令 6.PC Web 验证 7.开放端口 7.1IM 端口 7.2Chat 端口 7.3 PC Web 及管理后台前端资源端口 “如果您在解决类似问题时也遇到了困难,希望我的经验分享…

将深度相机的实时三维坐标数据保存为excel文档(Python+Pyrealsense2+YOLOv8)

一、如何将数据保存为excel文档 1.excel文件库与相关使用 (1)导入相应的excel文件库,导入前先要进行pip安装,pip install xlwt import xlwt # 导入用于创建和写入Excel文件的库 (2) 建立一个excel文档,并在第0行写…

Python | Leetcode Python题解之第198题打家劫舍

题目: 题解: class Solution:def rob(self, nums: List[int]) -> int:if not nums:return 0size len(nums)if size 1:return nums[0]first, second nums[0], max(nums[0], nums[1])for i in range(2, size):first, second second, max(first nu…

读AI新生:破解人机共存密码笔记12人工智能辩论

1. 言论 1.1. 对一个人终身职业的威胁,可能会使一个非常聪明的、通常很有思想的人说出一些话,但在进一步分析后,他们很可能希望收回这些话 1.2. 电子计算器在算术方面是“超人”,但是计算器并没有接管世界,因此&…

IMX6ULL SD卡启动uboot+kernel+rootfs

目录 1. 背景说明 2.SD卡启动 2.1准备条件 2.2 对SD卡分区格式化 2.3 制作sd卡镜像 3.效果测试 1. 背景说明 网络上绝大数教程,教大家把uboot烧录到SD卡,然后uboot启动后,通过TFTP下载kernel和设备树,然后通过nfs挂载文件系…

laravel的日志使用说明

文章目录 了解系统的默认支持多个通道时它们的关系如何使用驱动 了解系统的默认支持 Laravel 日志基于「 通道 」和 「 驱动 」的。那么这个通道是干嘛的?驱动又是干嘛的? 通道 : 1.它表示了某种日志格式化的方式(或可理解为某个…

理解CNN模型如何学习

深度学习模型常常被认为是不可解释的。但是人们正在探索不同的技术来解释这些模型内发生了什么。对于图像,由卷积神经网络学习的特征是可解释的。我们将探索两种流行的技术来理解卷积神经网络。 可视化中间层的输出 可视化中间层的输出将有助于我们理解输入图像如何…

办公软件的答案?ONLYOFFICE 桌面应用编辑器会是最好用的 Office 软件?ONLYOFFICE 桌面编辑器使用初体验

文章目录 📋前言🎯什么是 ONLYOFFICE🎯 主要功能介绍及 8.1 新功能体验🎯 在线体验📝最后 📋前言 提到办公软件,大家最常用的可能就是微软的 Microsoft Office 和国产的 WPS Office。这两款软件…

使用API有效率地管理Dynadot域名,为文件夹中的域名进行域名停放

关于Dynadot Dynadot是通过ICANN认证的域名注册商,自2002年成立以来,服务于全球108个国家和地区的客户,为数以万计的客户提供简洁,优惠,安全的域名注册以及管理服务。 Dynadot平台操作教程索引(包括域名邮…

解锁高效办公:ONLYOFFICE新版本8.1功能揭秘与个人实战体验

文章目录 💯ONLYOFFICE 桌面编辑器 8.1 ✍1 新增功能介绍✍2 轻松编辑器PDF文件🍓2.1 PDF新增编辑器操作🍓2.2 PDF新增表单操作 ✍3 用幻灯片版式快速修改幻灯片✍4 无缝切换文档编辑、审阅和查看模式✍5 改进从右至左语言的支持 & 新的本…

C++——布隆过滤器

目录 布隆过滤器的提出 布隆过滤器的概念 布隆过滤器的基本原理和特点 布隆过滤器的实现 布隆过滤器的插入 布隆过滤器的查找 布隆过滤器的删除 布隆过滤器的优点 布隆过滤器的缺陷 布隆过滤器使用场景 布隆过滤器的提出 在注册账号设置昵称的时候,为了保证…

【已解决】SpringBoot图片更新需重启服务器才能显示

问题描述 1、更新头像,并跳转回列表页,发现显示不出来 2、但是前端获取用户头像的信息是在加载页面就会被调用的,同时前端也不存在所谓的缓存问题,因为没有动这部分代码。 但查看响应是能获得正确的信息(前端打印图片…

Docker 下载与安装以及配置

安装yum工具 yum install -y yum-ulits配置yum源 阿里云源 yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo安装Docker 17.03后为两个版本: 社区版(Community Edition,缩写为 CE&#x…