深浅拷贝区别 以及手写深拷贝

news2024/11/17 19:48:57

一、概念

浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象。

二、浅拷贝的实现方式

  1. Object.assign()
    Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象。但是 Object.assign()进行的是浅拷贝,拷贝的是对象的属性的引用,而不是对象本身。
    在这里插入图片描述
    注意:当object只有一层的时候,是深拷贝
    在这里插入图片描述

  2. Array.prototype.concat()
    在这里插入图片描述
    修改新对象会改到原对象:
    在这里插入图片描述

  3. Array.prototype.slice()
    在这里插入图片描述
    修改新对象会改到原对象:
    在这里插入图片描述

三、深拷贝的实现方式

  1. JSON.parse(JSON.stringify())
let arr = [1, 3, {username: 'kobe'}];
let arr4 = JSON.parse(JSON.stringify(arr));
arr4[2].username = 'libai';
console.log(arr, arr4)

在这里插入图片描述
原理:用JSON.stringify将对象转成JSON字符串,再用JSON.parse()把字符串解析成对象,一去一来,新的对象产生了,而且对象会开辟新的栈,实现深拷贝。

弊端:
(1)序列化反序列化十分耗性能;
(2)如果遇到key是js函数或者js关键字,会自动跳过。

  1. 手写深拷贝
function deepClone(sourceObj){
   //建立新容器
   const targetObj = sourceObj.constructor === Array ? [] : {}
   // 遍历
   for(let keys in sourceObj){
     if(sourceObj.hasOwnProperty(keys)){
         // 判断是基础数据类型还是引用数据类型,如果是引用数据类型
         if(targetObj[keys] && typeof sourceObj[keys] === 'Object'){
             targetObj[keys] = sourceObj[keys].constructor === Array ? [] : {}
             targetObj[keys] = deepClone(sourcrObj[keys])
         } else {
             // 基本数据类型
             targetObj[keys] = sourceObj[keys]
         }
      }
   }
   return targetObj
}
let sourceObj = {
    num: 12,
    str: 'xxx',
    bol: false,
    // 函数的处理一般只是功能的复用
    fn: function(){console.log('6')},
    // 也不需要处理
    nulVal: null,
    // 无元素,可以直接通过构造函数new出来的
    reg: /7/,
    date: new Date(),
    // 新结构
    map: new Map([['d', 8], ['c', 4]]),
    set: new Set([10, 11]),
    //[key+value]
    array: [1,2],
    arrayofobj: [{a: 3, b: 4}],
    obj: {c: 5} 
}

在这里插入图片描述

  1. 函数库lodash
    该函数库也有提供_.cloneDeep用来做 Deep Copy
var _ = require('lodash');
var obj = {
   a: 1,
   b: {f: {g: 1}},
   c: [1, 2, 3]
}
var obj2 = _.cloneDeep(obj);
console.log(obj.b.f == obj2.b.f)

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

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

相关文章

读书:《科学营销》

关键8个字 识别、创造、沟通、交付。 识别:识别客户的需求。 创造:创造一个产品或服务,满足用户的需求。 沟通或传播:你还得说出来,否则别人是不知道的。 交付:给客户带来价值。 营销的本质 吸引顾客…

ArrayMap源码解析

一、数据结构 ArrayMap是一个key-value的数据结构,它比HashMap有更高的内存效率 它映射到两个数组结构:一个整数数组mHashes,用来保存key的hashcode;一个对象数组mArray,保存key-value 它不适用于大量数据的存储&…

关于在使用Word写论文时如何引用其它论文的方法

目录 步骤1步骤2 步骤1 全选需要进行标注的论文标题,然后按照下面的图片演示步骤进行操作。 步骤2 注意:如果没看到,拖动一下窗口的滚条,应该在下面一点。然后就是在论文引用的位置,依次进行插入就行了。

DevOps系列文章 之 Java使用jgit管理git仓库

最近设计基于gitops新的CICD方案,需要通过java读写git仓库,这里简单记录下。 在jgit中,存在最核心的三个组件:Git类,Repository类。Git类中包含了push commit之类的常见git操作,而Repository则实现了仓库的初始化和基…

查看自己所有的工程提交次数

git branch -r --contains [ hash index] 远程仓库是否包含当前的提交 我写的注释什么的很少出现 日期的英文, 所以很好统计 #!/bin/bashCOUNTS0 DATE$(date | awk {print $2}) DIRS$(ls) CHECK_URLgit10.0.128.128:sw/ INDEX0 TODAY$(date | awk {printf "%s %s %s"…

Nginx代理nginx.conf配置——反向代理(对WebSocket支持)

一、需求说明 基于Nginx代理nginx.conf配置——反向代理,如果要添加websocket支持,需要进行如下配置 二、配置内容 在http中添加一下配置,添加对websocket支持 http {# 配置其它内容map $http_upgrade $connection_upgrade {default upgra…

国赛试题解析1:SW3模拟办事处与防火墙之间运行OSPFv2协议

试题内容:(4)SW3模拟办事处产品和营销接口配置为loopback,模拟接口up。SW3模拟办事处与FW2之间运行OSPFv2协议,进程2,区域2,SW3模拟办事处发布loopback2、产品和营销。 SW3模拟 办事处 loopback2 10.1.3.2/32 2001:10:1:3::2/128 vlan110(产品) 10.1.110.1/24

【教学类-36-07】对称蝴蝶(midjounery-niji)(涂色、裁剪、游戏(飞舞的蝴蝶))

作品展示 一、利用midjounery获得简笔画样式的“蝴蝶” Animal Mask , simple stroke, cartoon, black and white outline, uncolored NIJI 5 二、图片切割 用以下代码把上面文件夹里所有的2048*2048的单张图片切割程2*2 # 参考网址:https://blog.csdn.net/weixi…

2023年计算机科学与信息技术国际会议(ECCSIT 2023) | Ei Scopus双检索

会议简介 Brief Introduction 2023年计算机科学与信息技术国际会议(ECCSIT 2023) 会议时间:2023年12月15日-17日 召开地点:中国北海 大会官网:www.eccsit.org 2023年计算机科学与信息技术国际会议(ECCSIT 2023)由西南交通大学、西南财经大学、…

使用easyexcel出现的错误

说明:easyexcel(官网:https://easyexcel.opensource.alibaba.com/)是阿里巴巴提供的,用于项目中读取/导出excel文件的工具,本文介绍使用easyexcel常见的两种错误。 错误一:java.lang.NoSuchMet…

代谢组学分析 PCA PLS-DA OPLS-DA 在R语言中的实现

主成分分析(Principal Component Analysis,PCA)是一种无监督降维方法,能够有效对高维数据进行处理。但PCA对相关性较小的变量不敏感,而PLS-DA(Partial Least Squares-Discriminant Analysis,偏最…

el-table 添加合计,合计某一列

效果图&#xff1a; 1. 使用elementui 官网上的方法 如果是只要是数值&#xff0c;就要合并&#xff0c;就只设置show-summary 即可。 2. html&#xff1a; <!--cell-style 改变某一列行的背景色 --><!-- tree-props 配置树形子表row-click: 单击事件highlight-cu…

node修改版本、npm修改版本、yarn无法加载文件、node_modules\sharp: Command failed解决方法

1、node修改版本 步骤1&#xff1a;从node官网下载node压缩包或者exe文件 如果是下载的是exe文件就直接找到原来的node.exe文件替换掉就可以了&#xff0c;环境变量配置不变 如果是下载的node压缩包&#xff0c;需要解压后&#xff0c;修改本地的环境变量配置&#xff08;查看步…

微服务实例构建成 docker 镜像实例

&#x1f388; 作者&#xff1a;Linux猿 &#x1f388; 简介&#xff1a;CSDN博客专家&#x1f3c6;&#xff0c;华为云享专家&#x1f3c6;&#xff0c;Linux、C/C、云计算、物联网、面试、刷题、算法尽管咨询我&#xff0c;关注我&#xff0c;有问题私聊&#xff01; &…

抖音seo源码部署搭建--代码分享

一、 开发环境搭建 抖音SEO源码部署环境搭建可以分为以下几个步骤&#xff1a; 安装必要的软件和工具&#xff1a;需要安装Node.js、NPM、Git等软件和工具&#xff0c;具体安装方法可以参考官方文档。 下载源码&#xff1a;从GitHub或其他源码托管平台下载抖音SEO源码。 安装…

SpringBoot 配置文件:什么时配置文件?配置文件能干什么?

文章目录 &#x1f387;前言1.配置文件的格式2. properties配置文件说明2.1 properties基本语法2.2 读取配置文件 3. yml 配置文件说明3.1 yml 基本语法 4.properties与yml 对比 &#x1f387;前言 学习一个东西&#xff0c;我们先要知道它有什么用处。整个项目中所有重要的数…

Vscode 绿色系清新主题

炎炎夏日&#xff0c;上班上的心浮气躁&#xff0c;敲代码的时候&#xff0c;只觉昏昏沉沉&#xff0c;浑浑噩噩... 给vscode换一个一个清新美好的绿色主题&#xff0c;充满活力和希望吧。 朋友们&#xff0c;收藏起来&#xff0c;每个季节换一个主题&#xff0c;打工快乐&am…

[工业互联-14]:机器人操作系统与ROS

目录 第1章 简介 第2章 历史 第3章 特点 &#xff08;1&#xff09;点对点设计 &#xff08;2&#xff09;不依赖编程语言 &#xff08;3&#xff09;精简与集成 &#xff08;4&#xff09;便于测试 &#xff08;5&#xff09;开源 &#xff08;6&#xff09;强大的库及…

LVS-DR负载群集的优势和部署实例

目录 一、DR模式数据包流向分析 二、DR模式的特点 三、DR模式中需要解决的问题 四、LVS-DR部署实例 1.配置NFS共享存储器 2.配置节点web服务&#xff08;两台的配置相同&#xff09; 3.配置LVS负载调度器 一、DR模式数据包流向分析 1.Client 客户端发送请求到 Director …

OpenCV库实现了一个简单的图像放缩工具

这里是详细的代码解析: #include <opencv2/opencv.hpp> // 引入OpenCV主要库。 #include <opencv2/highgui/highgui.hpp> // 引入高级GUI模块,它包含用于显示图像和获取用户输入的函数。 #include <opencv2/imgproc/imgproc.hpp> // 引入图像处理模块,它…