JavaScript中的深拷贝与浅拷贝

目录

引言:

一、浅拷贝(Shallow Copy)

二、深拷贝(Deep Copy)

实现深拷贝的方法:

     1.使用JSON.parse(JSON.stringify(obj))

     2.使用递归实现深拷贝

三、总结

引言

        在JavaScript中,当我们需要复制一个对象时,可能会遇到深拷贝和浅拷贝的问题。这两种拷贝方式在处理对象及其子对象时有着显著的区别。本文将详细介绍深拷贝和浅拷贝的概念、区别,以及实现深拷贝的几种方法。

一、浅拷贝(Shallow Copy)

        浅拷贝是创建一个新对象,并将原对象的属性值复制到新对象。但是,这里的“复制”是浅层次的。如果原对象的属性值是一个引用类型(如对象、数组等),那么复制的是这个引用类型的地址,而不是真正的对象。因此,新对象和原对象会共享这个引用类型的值。

代码示例

let obj1 = {    a: 1,  // a是一个基本类型(number)  b: { c: 2 }  // b是一个引用类型(对象),它的c属性也是一个基本类型(number)  
};  let obj2 = Object.assign({}, obj1); // 浅拷贝obj2.a = 3; // 修改obj2的a属性,由于a是基本类型,所以它在obj2中有了新的值,不影响obj1  
console.log(obj1.a); // 输出1,因为obj1的a属性没有被修改  obj2.b.c = 4; // 修改obj2的b对象的c属性,由于b是引用类型,obj2.b和obj1.b指向同一个对象,所以obj1的b对象的c属性也被修改了  
console.log(obj1.b.c); // 输出4,因为obj1和obj2的b属性指向同一个对象,所以修改是共享的

        当您在JavaScript中执行浅拷贝时,您实际上是在复制对象的顶层属性到新的对象。但是,如果这些属性是引用类型(如对象或数组),那么您复制的仅仅是这些引用类型的引用(即它们的内存地址),而不是实际的对象。

二、深拷贝(Deep Copy)

        深拷贝是创建一个新对象,并将原对象的属性值及其子对象的属性值都复制到新对象。深拷贝会递归地复制所有级别的属性,直到所有的属性都是基本类型为止。这样,新对象和原对象是完全独立的,互不影响。

实现深拷贝的方法

        1.使用JSON.parse(JSON.stringify(obj))

        这种方法简单方便,但有其局限性。它不能正确处理函数、循环引用、undefinedSymbol和某些Date对象等。

代码示例:

let obj1 = {  a: 1,  b: { c: 2 }  
};  let obj2 = JSON.parse(JSON.stringify(obj1)); // 深拷贝  obj2.a = 3; // 修改obj2的a属性,不影响obj1  
console.log(obj1.a); // 输出1  obj2.b.c = 4; // 修改obj2的b对象的c属性,不影响obj1  
console.log(obj1.b.c); // 输出2
        2.使用递归实现深拷贝

        递归方法可以实现更精确的深拷贝,可以处理函数、循环引用等复杂情况。但需要注意递归终止条件和循环引用的处理。

代码示例:

function deepCopy(obj, hash = new WeakMap()) {  if (typeof obj !== 'object' || obj === null) {  return obj;  }  if (hash.has(obj)) {  return hash.get(obj);  }  let copy = Array.isArray(obj) ? [] : {};  hash.set(obj, copy);  for (let key in obj) {  if (obj.hasOwnProperty(key)) {  copy[key] = deepCopy(obj[key], hash);  }  }  return copy;  
}  // 使用示例  
let obj1 = {  a: 1,  b: { c: 2 }  
};  let obj2 = deepCopy(obj1); // 深拷贝  // 修改操作...

三、总结

        深拷贝和浅拷贝在处理JavaScript对象时有着显著的区别。浅拷贝只复制对象的顶层属性,如果属性值是引用类型,则复制的是引用地址;而深拷贝会递归地复制对象的所有属性,包括子对象,使得新对象和原对象是完全独立的。在实际开发中,需要根据具体的需求来选择使用哪种拷贝方式,并注意各种拷贝方法的限制和优缺点。

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

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

相关文章

安卓接入wwise

第一步&#xff1a; #include "com_hs_androidjnidemo_MainActivity.h" #include "jni.h" #include <stdio.h> #include <YLWwiseEngine.h> #include <AK/SoundEngine/Common/AkTypes.h>//全局变量 gaden JavaVM *g_vm;//0.JNI_OnLoad J…

暂时性解决JDK21 无法使用 TimeUnit的问题

我调用 java.util中的TimeUtil时。 JDK17及以下版本时这样正常可以使用的 但是在JDK21中却是个TimeUtil.class文件 我没法调用内部的属性 解决方式&#xff1a;是我卸载了21&#xff0c;使用的了JDK17. 使用场景&#xff1a;原本项目是基于JDK8 的&#xff0c;但是因为其他…

关于kline-chart图表程序的一些构想

之前在这儿&#xff1a;一个python实现的kline-chart图表程序&#xff08;二&#xff09;_klinechart教程-CSDN博客 实现了一个看起来不错的K线图表的功能&#xff0c;可以按要求生成对应的图形。不过还是有些问题。比如我想做一个缠论关于笔&#xff0c;线段&#xff0c;中枢等…

什么是限流?常见的限流算法

目录 1. 什么是限流 2. 常见限流算法 3. 固定窗口算法 4. 滑动窗口算法 5. 漏桶算法 6. 令牌桶算法 7. 限流算法选择 1. 什么是限流 限流&#xff08;Rate Limiting&#xff09;是一种应用程序或系统资源管理的策略&#xff0c;用于控制对某个服务、接口或功能的访问速…

Sortable 拖拽行实现el-table表格顺序号完整例子,vue 实现表格拖拽行顺序号完整例子

npm install sortable<template><vxe-modalref"modalRef"v-model"showModal"title"详情"width"70vw"height"60vh"class"his"transfer><el-table ref"tableRef" :data"tableData&q…

原生 php 实现redis缓存配置和使用方法

在 PHP 中实现 Redis 缓存的配置和方法&#xff0c;首先需要确保你的服务器上安装了 Redis&#xff0c;并且 PHP 安装了 Redis 扩展。以下是一个基本的步骤和示例&#xff1a; 1. 安装 Redis 和 PHP Redis 扩展 Redis 安装&#xff1a;根据你的服务器操作系统和配置&#xff…

机器学习-06-聚类算法总结

聚类总结 1.聚类 机器学习 任务 聚类 无label的 分类 label是离散的 回归 label是连续的 2.聚类算法-kmeans 划分聚类 思想&#xff1a; D中选取k个作为初始质心 repeat 计算所有点与质心的距离&#xff0c;分到近的质心簇 更新簇之间的质心 until 质心不改 不足&#xff…

中文输入法导致的高频事件

场景&#xff1a; input.addEventListener(input, (e) > {console.log(e.target.value) }); 当给一个输入框绑定了 input 事件&#xff0c;输入法切换到中文正在拼写的过程中也会触发 input 事件。 解决办法&#xff1a; 在中文拼写开始和结束的时候分别会触发 composit…

Docker Compose部署项目flask+mysql + redis

什么是DockerCompose Docker Compose通过一个单独的docker-compose.yml 模板文件&#xff08;YAML 格式&#xff09;来定义一组相关联的应用容器&#xff0c;帮助我们实现多个相互关联的Docker容器的快速部署。 我们以flask&#xff0b;mysql redis项目为例 项目目录结构如下…

抖音视频怎么无水印下载(方法)

在这个数字化时代&#xff0c;抖音已经成为了人们生活中不可或缺的一部分。每天&#xff0c;数以亿计的用户在这个平台上分享着各种各样的视频&#xff0c;让人们笑&#xff0c;让人们感动&#xff0c;让人们沉迷。你是否曾经遇到过想要保存一段精彩的抖音视频却苦于无法去掉水…

Web自动化—Cypress 测试框架概述

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号【互联网杂货铺】&#xff0c;回复 1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 Cypress 测试框架概述 1.1 Cypress 默认文件结构 在Cypress安装…

Docker知识点汇总表格总结

Docker容器给我的一个很直观的感受就是将项目以及中间件安装变得比较简单直接&#xff0c;运行维护起来也更方便。之前做的一些微服务项目也是用docker来部署&#xff0c;现在很多开源的项目也流行使用docker来部署&#xff0c;简化了很多手动安装和配置的步骤&#xff0c;将项…

6.python网络编程

文章目录 1.生产者消费者-生成器版2.生产者消费者--异步版本3.客户端/服务端-多线程版4.IO多路复用TCPServer模型4.1Select4.2Epoll 5.异步IO多路复用TCPServer模型 1.生产者消费者-生成器版 import time# 消费者 def consumer():cnt yieldwhile True:if cnt < 0:# 暂停、…

【leetcode】链表反转题目总结

206. 反转链表 全部反转 递归法和迭代法 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(int x) : val(x), next(nullptr) {}* ListNode(int x, ListNode …

智能家居|基于SprinBoot+vue的智能家居系统(源码+数据库+文档)

智能家居目录 基于SprinBootvue的智能家居系统 一、前言 二、系统设计 三、系统功能设计 1管理员&#xff1a;个人中心管理功能的详细实现 2管理员&#xff1a;用户信息管理功能的详细实现 3管理员&#xff1a;家具管理功能的详细实现 4管理员&#xff1a;任务管理功能…

Python绘制的好看统计图

代码 sx [Accent, Accent_r, Blues, Blues_r, BrBG, BrBG_r, BuGn, BuGn_r, BuPu, BuPu_r, CMRmap, CMRmap_r, Dark2, Dark2_r, GnBu, GnBu_r, Greens, Greens_r, Greys, Greys_r, OrRd, OrRd_r, Oranges, Oranges_r, PRGn, PRGn_r, Paired, Paired_r, Pastel1, Pastel1_r, P…

C# var 关键字

在C#中&#xff0c;var 是一个关键字&#xff0c;用于声明一个隐式类型的局部变量。当使用 var 声明变量时&#xff0c;编译器会根据变量的初始化表达式推断出变量的具体类型&#xff0c;并将其隐式地设置为推断出的类型。 下面是对C#中 var 类型的详细解释和示例说明&#xf…

CSAPP | Floating Point

CSAPP | Floating Point b i b_i bi​ b i − 1 b_{i-1} bi−1​ … b 2 b_2 b2​ b 1 b_1 b1​ b 0 b_0 b0​ b − 1 b_{-1} b−1​ b − 2 b_{-2} b−2​ b − 3 b_{-3} b−3​ … b − j b_{-j} b−j​ S ∑ k − j i b k 2 k S\sum_{k-j}^{i}b_k\times2^k S∑k…

了解一下创新奇智的 Orion 分布式机器学习平台

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 创新奇智的 Orion 分布式机器学习平台是一个企业级的端到端机器学习解决方案&#xff0c;它通过整合智能资源调度中心&#xff08;IRC&#xff09;、智能数据自动化中心&#xff08;DAC&#xff09;和自…

HarmonyOS 4.0(鸿蒙开发)01 - 怎么学习鸿蒙引导篇

作为公司的全栈开发工程师 以及 未来的发展是有鸿蒙这个阶段的&#xff0c;以及本身具有这个技术栈由此后续会分享自己在实战中学习到的东西&#xff0c;碰到的bug都会分享出来&#xff0c;这是引导篇期待后续的更新 学习目标&#xff1a; 理解HarmonyOS操作系统的架构和开发…