JS-17--深拷贝跟浅拷贝的区别?如何实现一个深拷贝?

1、数据类型存储
JavaScript中存在两大数据类型:
基本类型
引用类型
基本类型数据保存在栈内存中
引用类型数据保存到堆内存中,引用数据类型的变量是一个指向堆内存中实际x对象的引用,存在栈中

2、浅拷贝
浅拷贝指的是创建新的数据,这个数据有着原始数据属性值的一份精确拷贝
如果属性是基本类型,拷贝的就是基本类型的值,如果属性是引用类型,拷贝的就是内存地址,
即浅拷贝是拷贝一层,深层次的引用类型则是共享内存地址。
浅拷贝代码:
在这里插入图片描述

在JavaScript中,存在浅拷贝的现象有:
Object.assgin
Array.prototype.slice()、Array.prototype.concat()
使用拓展运算符实现的复制

2.1、 Object.assgin
在这里插入图片描述

2.2、Array.prototype.slice()
在这里插入图片描述

2.3、Array.prototype.concat()
在这里插入图片描述

2.4使用拓展运算符实现的复制
在这里插入图片描述

3、深拷贝
深拷贝开辟了一个新的栈,两个对象属性完全相同,但是对应两个不同的地址,修改一个对象的属性,不会改另一个对象的属性。
常见的深拷贝的方式有:
_.cloneDeep()
jQuery.extend()
JSON.stringify()
手写循环递归
_.cloneDeep()
在这里插入图片描述

jQuery.extend()

在这里插入图片描述

JSON.stringify()

在这里插入图片描述

但是这种方式存在弊端,会忽略undefined、symbo和函数

在这里插入图片描述

手写循环递归

在这里插入图片描述

4、区别
下面通过两张图,可以更加清晰看到浅拷贝和深拷贝的区别
在这里插入图片描述

从上图发现,浅拷贝和深拷贝都创建一个新的对象,但在复制对象属性的时候,行为不一样
浅拷贝只复制属性指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存,修改对象属性会影响原对象

在这里插入图片描述
但深拷贝会另外创建一个一摸一样的对象,新对象跟原对象不共享内存,修改新对象不会改变原对象。
在这里插入图片描述

5、小结
前提为拷贝类型为引用类型的情况下:
浅拷贝是拷贝一层,属性为对象时,浅拷贝是复制,两个对象指向同一地址。
深拷贝是递归拷贝深层次,属性为对象时,深拷贝是新开栈,两个对象指向不同地址。

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

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

相关文章

std::make_shared和new初始化智能指针的区别

先看代码&#xff1a; class Base {public:Base(int num):a(num) {std::cout << "Base() construct" << std::endl;}~Base() {std::cout << "Base() deconstruct" << std::endl;}int Get() {return a;}private:int a; };void tes…

react利用wangEditor写评论和@功能

先引入wangeditor写评论功能 import React, { useEffect, useState, useRef, forwardRef, useImperativeHandle } from react; import wangeditor/editor/dist/css/style.css; import { Editor, Toolbar } from wangeditor/editor-for-react; import { Button, Card, Col, For…

【数据结构与算法系列5】螺旋矩阵II (C++ Python)

给你一个正整数 n &#xff0c;生成一个包含 1 到 n2 所有元素&#xff0c;且元素按顺时针顺序螺旋排列的 n x n 正方形矩阵 matrix 。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;[[1,2,3],[8,9,4],[7,6,5]]示例 2&#xff1a; 输入&#xff1a;n 1 输出&am…

53、springboot对websocket的支持有两种方式-------1、基于注解开发 WebSocket ,简洁实现多人聊天界面

基于注解开发 WebSocket –注解就是&#xff1a; OnOpen、 OnClose 、 OnMessage 、OnError这些 ★ WebSocket的两种开发方式 ▲ Spring Boot为WebSocket提供了两种开发方式&#xff1a; 基于spring-boot-starter-websocket.jar开发WebSocket 基于Spring WebFlux开发WebSoc…

Kotlin委托Delegate托管by

Kotlin委托Delegate托管by import kotlin.reflect.KPropertyfun main() {var user: String by MyDelegate()user "fly"println(user) }class MyDelegate {private var v: String? nulloperator fun getValue(thisRef: Any?, property: KProperty<*>): Stri…

驱动轴相机参数设置Web前端界面开发

一、基于Django的Web应用界面的开发&#xff1a; 在Realtimeresults.html上添加一个按钮组件&#xff0c;获取检测到的轴型和车轮信息&#xff0c;点击后可以获取package.json里存放的json数据&#xff0c;效果如下&#xff1a; 实现逻辑&#xff1a;需要从URL设置、视图函数、…

【iOS】Category、Extension和关联对象

Category分类 Category 是 比继承更为简洁 的方法来对Class进行扩展,无需创建子类就可以为现有的类动态添加方法。 可以给项目内任何已经存在的类 添加 Category甚至可以是系统库/闭源库等只暴露了声明文件的类 添加 Category (看不到.m 文件的类)通过 Category 可以添加 实例…

使用 Sealos 在离线环境中光速安装 K8s 集群

作者&#xff1a;尹珉。Sealos 开源社区 Ambassador&#xff0c;云原生爱好者。 当容器化交付遇上离线环境 在当今快节奏的软件交付环境中&#xff0c;容器化交付已经成为许多企业选择的首选技术手段。在可以访问公网的环境下&#xff0c;容器化交付不仅能够提高软件开发和交付…

【JavaScript】JS语法入门到实战

文章目录 一、初识JavaScript1. 什么是JavaScript&#xff1f;2. JavaScript 和 HTML 和 CSS 之间的关系3. JavaScript的运行过程4. JavaScript的组成 二、JavaScript的书写形式三、变量1. 输入输出2. 变量的使用3. 数据类型 四、运算符五、分支和循环语句1. 分支语句2. 循环语…

uniapp打包微信小程序。报错:https://api.weixin.qq.com 不在以下 request 合法域名列表

场景&#xff1a;在进行打包上传测试时&#xff0c;发现登录失效&#xff0c;但在测试中【勾选不效应合法域名】就可以。 出现原因&#xff1a;我在获取到用户code后&#xff0c;直接使用调用官方接口换取openid 解决方案&#xff1a; 可以把code带给后端&#xff0c;让他们返…

Leetcode128. 最长连续序列

力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 给定一个未排序的整数数组 nums &#xff0c;找出数字连续的最长序列&#xff08;不要求序列元素在原数组中连续&#xff09;的长度。 请你设计并实现时间复杂度为 O(n) 的算法解决此问题。 题解&#…

Qt 简单闹钟

//wiget.h#ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTime> //时间类 #include <QTimer> //定时器类 #include <QTextToSpeech> #include <QDebug> QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPA…

无需编程经验,也能制作租车预约微信小程序,快速上手

现在&#xff0c;制作租车预约微信小程序不再需要编程经验&#xff0c;只需几个简单的步骤&#xff0c;您就可以拥有自己的租车预约微信小程序。在本文中&#xff0c;我们将介绍如何利用乔拓云网后台来制作租车预约微信小程序&#xff0c;并实现您所需的功能。 首先&#xff0c…

当面试官问你离职原因的时候怎么回答比较好?

所有的前提都是建立在有一定的物质基础&#xff0c;当你的一日三餐都成了问题&#xff0c;都需要家庭支持的时候我希望你可以找一份工作&#xff0c;靠自己的本事养活自己从来不丢人&#xff0c;我觉得死要面子活受罪才是真的让你看不起。 所有的建议都是建立在我们是普通打工人…

《TCP/IP网络编程》阅读笔记--并发多进程服务端的使用

1--并发服务器端 并发服务器端主要有以下三类&#xff1a; ① 多进程服务器&#xff1a;通过创建多个进程提供服务&#xff1b; ② 多路复用服务器&#xff1a;通过捆绑并统一管理I/O对象提供服务&#xff1b; ③ 多线程服务器&#xff1a;通过生成与客户端等量的线程提供服务&…

【论文通读】CLIP改进工作综述

CLIP改进工作综述 前言1. 语义分割1.1 Lseg1.2 GroupViT 2. 图像检测2.1 ViLD2.2 GLIP2.3 GLIPv2 3. 图像生成3.1 CLIPasso 4. 视频理解4.1 CLIP4Clip4.2 ActionCLIP 5. 其它领域5.1 CLIP-VIL5.2 AudioCLIP5.3 PointCLIP5.4 DepthCLIP 总结参考链接 前言 CLIP作为多模态对比学…

递归算法学习——N皇后问题,单词搜索

目录 ​编辑 一&#xff0c;N皇后问题 1.题意 2.解释 3.题目接口 4.解题思路及代码 二&#xff0c;单词搜索 1.题意 2.解释 3.题目接口 4.思路及代码 一&#xff0c;N皇后问题 1.题意 按照国际象棋的规则&#xff0c;皇后可以攻击与之处在同一行或同一列或同一斜线上…

CSP-J初赛复习大题整理笔记

本篇全是整理&#xff0c;为比赛准备. 在这里插入代码片 #include<cstdio> using namespace std; int n, m; int a[100], b[100];int main() {scanf_s("%d%d", &n, &m);for (int i 1; i < n; i)a[i] b[i] 0;//将两个数组清0&#xff0c;这…

【zookeeper】zookeeper介绍

分布式协调技术 在学习ZooKeeper之前需要先了解一种技术——分布式协调技术。那么什么是分布式协调技术&#xff1f;其实分布式协调技术主要用来解决分布式环境当中多个进程之间的同步控制&#xff0c;让他们有序的去访问某种临界资源&#xff0c;防止造成"脏数据"的…

5分钟生成10条短视频,AI重构电商营销

点击关注 文&#xff5c;姚 悦&#xff0c;编&#xff5c;王一粟 “我们将正式告别过去单一渠道投放的时代&#xff0c;走向一站式跨渠道品效联合经营的全新时代。”9月6日&#xff0c;在2023年其最重要的营销峰会上&#xff0c;淘天集团阿里妈妈市场部总经理穆尔说道。 当天…