JavaScript中的深拷贝(deep copy)和浅拷贝(shallow copy)

news2024/12/24 8:13:53

聚沙成塔·每天进步一点点


⭐ 专栏简介

前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个专栏中,我们将以问答形式每天更新,为大家呈现精选的前端知识点和常见问题解答。通过问答形式,我们希望能够更直接地回应读者们对于前端技术方面的疑问,并且帮助大家逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是各种常用框架和工具,我们将深入浅出地解释概念,并提供实际案例和练习来巩固所学内容。同时,我们也会分享一些实用技巧和最佳实践,帮助你更好地理解并运用前端开发中的各种技术。

在这里插入图片描述

无论你是寻找职业转型、提升技能还是满足个人兴趣,我们都将全力以赴,为你提供最优质的学习资源和支持。让我们一起探索Web开发的奇妙世界吧!加入前端入门之旅,成为一名出色的前端开发者! 让我们启航前端之旅!!!

今日份内容:JavaScript中的深拷贝(deep copy)和浅拷贝(shallow copy)











在这里插入图片描述


深拷贝(Deep Copy)和浅拷贝(Shallow Copy)是两种复制对象的不同方式,它们的主要区别在于复制对象内部嵌套对象的方式。

⭐ 浅拷贝(Shallow Copy)

浅拷贝创建一个新的对象,新对象的属性与原始对象相同。然而,对于嵌套对象,浅拷贝只复制了引用,而不是实际的嵌套对象本身。这意味着如果原始对象包含嵌套对象,浅拷贝后的对象仍然会共享这些嵌套对象。

const original = {
  a: 1,
  b: { c: 2 },
};

// 浅拷贝
const shallowCopy = Object.assign({}, original);

// 修改嵌套对象,会影响原始对象和浅拷贝
shallowCopy.b.c = 3;

console.log(original.b.c); // 输出 3

⭐ 深拷贝(Deep Copy)

深拷贝创建一个新的对象,新对象的属性与原始对象相同。对于嵌套对象,深拷贝会递归复制嵌套对象本身,而不是共享引用。这意味着深拷贝后的对象与原始对象彼此独立,互不影响。

const original = {
  a: 1,
  b: { c: 2 },
};

// 深拷贝(使用递归函数)
function deepCopy(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
  const copy = Array.isArray(obj) ? [] : {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopy(obj[key]);
    }
  }
  return copy;
}

const deepClone = deepCopy(original);

// 修改嵌套对象,不会影响原始对象
deepClone.b.c = 3;

console.log(original.b.c); // 输出 2

总结:

  • 浅拷贝复制了对象及其嵌套对象的引用,因此嵌套对象是共享的。
  • 深拷贝复制了对象及其嵌套对象的实际内容,因此嵌套对象是独立的。
  • 选择深拷贝或浅拷贝取决于你的需求。如果需要完全独立的副本,使用深拷贝。如果嵌套对象共享不是问题,使用浅拷贝可能更高效。

⭐ 写在最后

本专栏适用读者比较广泛,适用于前端初学者;或者没有学过前端对前端有兴趣的伙伴,亦或者是后端同学想在面试过程中能够更好的展示自己拓展一些前端小知识点,所以如果你具备了前端的基础跟着本专栏学习,也是可以很大程度帮助你查漏补缺,由于博主本人是自己再做内容输出,如果文中出现有瑕疵的地方各位可以通过主页的左侧联系我,我们一起进步,与此同时也推荐大家几份专栏,有兴趣的伙伴可以订阅一下:除了下方的专栏外大家也可以到我的主页能看到其他的专栏;

前端小游戏(免费)这份专栏将带你进入一个充满创意和乐趣的世界,通过利用HTML、CSS和JavaScript的基础知识,我们将一起搭建各种有趣的页面小游戏。无论你是初学者还是有一些前端开发经验,这个专栏都适合你。我们会从最基础的知识开始,循序渐进地引导你掌握构建页面游戏所需的技能。通过实际案例和练习,你将学会如何运用HTML来构建页面结构,使用CSS来美化游戏界面,并利用JavaScript为游戏添加交互和动态效果。在这个专栏中,我们将涵盖各种类型的小游戏,包括迷宫游戏、打砖块、贪吃蛇、扫雷、计算器、飞机大战、井字游戏、拼图、迷宫等等。每个项目都会以简洁明了的步骤指导你完成搭建过程,并提供详细解释和代码示例。同时,我们也会分享一些优化技巧和最佳实践,帮助你提升页面性能和用户体验。无论你是想寻找一个有趣的项目来锻炼自己的前端技能,还是对页面游戏开发感兴趣,前端小游戏专栏都会成为你的最佳选择。点击订阅前端小游戏专栏

在这里插入图片描述

Vue3通透教程【从零到一】(付费) 欢迎来到Vue3通透教程!这个专栏旨在为大家提供全面的Vue3相关技术知识。如果你有一些Vue2经验,这个专栏都能帮助你掌握Vue3的核心概念和使用方法。我们将从零开始,循序渐进地引导你构建一个完整的Vue应用程序。通过实际案例和练习,你将学会如何使用Vue3的模板语法、组件化开发、状态管理、路由等功能。我们还会介绍一些高级特性,如Composition API和Teleport等,帮助你更好地理解和应用Vue3的新特性。在这个专栏中,我们将以简洁明了的步骤指导你完成每个项目,并提供详细解释和示例代码。同时,我们也会分享一些Vue3开发中常见的问题和解决方案,帮助你克服困难并提升开发效率。无论你是想深入学习Vue3或者需要一个全面的指南来构建前端项目,Vue3通透教程专栏都会成为你不可或缺的资源。点击订阅Vue3通透教程【从零到一】专栏

在这里插入图片描述

TypeScript入门指南(免费) 是一个旨在帮助大家快速入门并掌握TypeScript相关技术的专栏。通过简洁明了的语言和丰富的示例代码,我们将深入讲解TypeScript的基本概念、语法和特性。无论您是初学者还是有一定经验的开发者,都能在这里找到适合自己的学习路径。从类型注解、接口、类等核心特性到模块化开发、工具配置以及与常见前端框架的集成,我们将全面覆盖各个方面。通过阅读本专栏,您将能够提升JavaScript代码的可靠性和可维护性,并为自己的项目提供更好的代码质量和开发效率。让我们一起踏上这个精彩而富有挑战性的TypeScript之旅吧!点击订阅TypeScript入门指南专栏

在这里插入图片描述

本文回顾

  • ⭐ 专栏简介
  • ⭐ 浅拷贝(Shallow Copy)
  • ⭐ 深拷贝(Deep Copy)
  • ⭐ 写在最后

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1072442.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

突发!该国教育部将MDPI、Hindawi和Frontiers三大出版商打包“拉黑”了!

最近,基于对学术诚信和作者署名的特别关切,马来西亚大学教育部发布了一项声明,禁止该国的公立大学使用政府预算来支付在MDPI、Hindawi和Frontiers三家学术出版商旗下的所有期刊上发表论文的费用。 马来西亚大学教育部还成立了一个特别委员会…

MyCat-web安装文档:安装Zookeeper、安装Mycat-web

安装Zookeeper A. 上传安装包 zookeeper-3.4.6.tar.gzB. 解压 #解压到当前目录,之后会生成一个安装后的目录 tar -zxvf zookeeper-3.4.6.tar.gz#加上-c 代表解压到指定目录 tar -zxvf zookeeper-3.4.6.tar.gz -C /usr/local/C. 在安装目录下,创建数据…

Attention Is All You Need(中文版)

目录 1 简介 2 背景 3 模型结构 3.1 编码器和解码器 3.2 注意力机制 3.2.1 缩放的点积注意力机制 3.2.2 多头注意力机制 3.2.3 Transformers中的注意力机制 3.3 基于位置的前馈神经网络 3.4 词嵌入和 softmax 3.5 位置编码 4 为什么选择自注意力机制 5 训练 5.1 硬件和时间 5.2…

深眸科技自研AI视觉分拣系统,实现物流行业无序分拣场景智慧应用

在机器视觉应用环节中,物体分拣是建立在识别、检测之后的一个环节,通过机器视觉系统对图像进行处理,并结合机械臂的使用实现产品分类。 通过引入视觉分拣技术,不仅可以实现自动化作业,还能提高生产线的生产效率和准确…

java案例25:批量操作文件管理器

思路: 编写文件管理器,实现文件的批量操作。具体功能: 1.用户输入指令1,代表“指定关键字检索文件”, 此时需要用户输入检索的目录和关键字, 系统在用户指定的目录下检索出文件名中包含关键字的文件 并将其…

抢先知:公抓抓 信息挖掘工具

随着经济全球化进程的加速,企业在不断发展和壮大,同时也在不断地适应市场的变化。在这个过程中,企业信息的及时获取和掌握变得至关重要。那么,最新企业信息哪里找呢?在这里介绍几个路径,可以参考&#xff0…

蓝桥杯每日一题2023.10.9

题目描述 成绩统计 - 蓝桥云课 (lanqiao.cn) 题目分析 学会使用四舍五入函数round #include<bits/stdc.h> using namespace std; int s1, s2; int main() {int n, x;cin >> n;for(int i 1; i < n; i ){cin >> x; if(x > 60)s1 ;if(x > 85)s2 ;…

GD32F103 硬件SPI通信

1. SPI的通信原理 SPI既可以做主机也可以做从机。 当做主机时。MOSI&#xff0c;SCK,CS都是作为输出。 而作为从机时。MOSI&#xff0c;SCK,CS都是作为输入。 所以SPI的硬件电路应该实现这样的功能。 2. GD32/STM32的SPI框图 1. GD32框图 如下图做主机的数据流向&#xf…

华为HCIP安全 VPN学习笔记 密码学基础:基本框架介绍

0.学习密码学的目的与方法 作为一个工程师&#xff0c;你不需要像科学家一样掌握密码学的整个开发过程。 为了保障安全性&#xff0c;密码学发展出不同的模块&#xff0c;解决了不同的问题&#xff0c;数据的安全性也在这个过程中不断提升。而加密只是其中众多模块之一。其他…

JAVA毕业设计098—基于Java+Springboot的在线教育课程视频(源码+数据库)

基于JavaSpringboot的在线教育课程视频(源码数据库)098 一、系统介绍 本系统分为管理员、教师、用户三种角色(角色菜单可自行分配) 用户功能&#xff1a; 注册、登录、课程搜索、视频观看、课程资料发布、资料浏览、用户中心、我的发布、通知信息、密码修改 教师功能&…

母婴店怎么在微信小程序卖东西

随着互联网的发展&#xff0c;微信小程序已经成为一种新型的电商模式&#xff0c;它无需下载安装&#xff0c;使用方便&#xff0c;不占用手机内存&#xff0c;让购物变得更加简单便捷。母婴店也可以通过微信小程序来销售产品&#xff0c;拓宽销售渠道&#xff0c;增加销售额。…

Docker Mysql实战:docker compose 搭建Mysql

1、docker-compose-mysql文件准备 进入/home/docker目录&#xff0c;新建docker-compose-mysql.yml文件&#xff0c;内容如下&#xff1a; version: 3.0 services:mysql:image: "mysql:5.7"container_name: "mysql"environment:MYSQL_ROOT_PASSWORD: &q…

还原回收站的文件需要管理员权限怎么办

案例分享&#xff1a;无意中删除一些文件至回收站&#xff0c;却无法还原&#xff0c;提示“您需要权限来执行此操作”。怎么办&#xff0c;请大侠指点&#xff1f; ——当我们意外地删除了文件并将其放入回收站时&#xff0c;我们通常可以轻松地将其还原。然而&#xff0c;有…

Springboot+vue的企业OA管理系统(有报告),Javaee项目,springboot vue前后端分离项目。

演示视频&#xff1a; Springbootvue的企业OA管理系统&#xff08;有报告&#xff09;&#xff0c;Javaee项目&#xff0c;springboot vue前后端分离项目。 项目介绍&#xff1a; 本文设计了一个基于Springbootvue的前后端分离的企业OA管理系统&#xff0c;采用M&#xff08;m…

如何正确操作封箱机

前文跟大家分享过封箱机错误操作三案例&#xff0c;那么封箱机到底如何才能正确操作呢&#xff1f;今天就和您分享一下如何正确操作封箱机。 1、确定正确的电源电压进行接入。目前国内封箱机均采用220v 50hz电源电压&#xff0c;但也有一些定制型设备可能使用380v电源&#xff…

vue建项目

vue3 create-vue 建vue3项目 vscode里改点东西&#xff0c;首先vetur禁用&#xff0c;这个是vue2的&#xff0c;下volar pinia持久化插件&#xff1a;npm i pinia-plugin-persistedstate 配eslint、prettier 在.eslintrc.cjs里配 rules: {// prettier专注于代码的美观度 (格…

Go 团队发布组织 / 构建 Go module 的官方指南

导读Go 团队发布了一份官方指南&#xff0c;帮助开发者更规范地组织 / 构建 Go module。 刚接触 Go 的开发者常见问题之一是&#xff0c;“就文件和文件夹的组织布局而言&#xff0c;如何组织我的 Go 项目&#xff1f;”。这份指南就是提供建议来帮助回答这个问题。其中包括针对…

2023年中国CEM-1型覆铜板产量、需求量及行业销售收入分析[图]

CEM-1指覆铜板的一种&#xff0c;以玻纤布半固化片与纸基半固化片层压铜箔达到固化后形成的板材&#xff0c;属于复合型基材&#xff0c;CEM-1能用来制作频率特性要求高的PCB&#xff0c;如电视机的调谐器、电源开关、超声波设备、计算机电源和键盘&#xff0c;也可以用于电视机…

解决扬声器异常

之前使用的是PulseAudio PulseAudio 是默认的音频服务器和音频框架&#xff0c;因此大多数应用程序通过 PulseAudio 来处理音频 但也有一些应用程序直接使用 ALSA&#xff08;Advanced Linux Sound Architecture&#xff09;来与音频硬件交互。在这些情况下&#xff0c;ALSA …

[GYCTF2020]Ezsqli 绕过or information_schema 无列名注入

https://www.cnblogs.com/h0cksr/p/16189749.html https://www.gem-love.com/ctf/1782.html 说好的ez.... 我们开始吧 首先就直接进行抓包 看回显 然后开始正常的测试 报错了 这里的 or过滤的绕过 我们可以使用 ^ 或者 || 我喜欢用 || 所以继续构造 发现了 就是目前这种…