JS中浅拷贝和深拷贝

  本篇文章咱们一起来学习下JS中的浅拷贝和深拷贝,了解它们在内存上的区别,并掌握浅拷贝和深拷贝的常用实现方法。

引用赋值

  在学习拷贝之前,咱们先来看一个常见的情景,如下图:

  大家觉得这是深拷贝还是浅拷贝,或者是其他的?

  答案是这种方式是引用赋值,它既不是深拷贝,也不是浅拷贝。在内存上的体现是person1和person2的内存指针都指向同一个堆内存对象,验证方式如下图:

  从输出结果可以看到修改person1和surname属性,person2的surname属性也发生了更改。

浅拷贝

  浅拷贝比较常见的实现方法是通过展开运算符(展开运算符被允许使用在对象字面量声明的时候),如下图:

  在内存上的体现是person1和person2分别指向不同的堆内存对象,验证方式如下图:

  从输出结果可以看到person2的surname属性并没有因为person1的surname属性发生改变而改变。

深拷贝

  通常用于复杂类型的拷贝,同时咱们也可以用来反向证明一下展开运算符是浅拷贝,代码如下图:

  从输出结果可以看到,1号小人的朋友从钱姓朋友变成了孙姓朋友,而2号小人的朋友姓氏也随之改变,这就说明person1和person2的friend指向的是同一个堆内存对象,而深拷贝需要将嵌套的每一层的对象都拷贝成全新的堆内存对象,常用的实现方法如下图:

  通过JSON.stringify方法将person1对象转为JSON,再通过JSON.parse方法将JSON字符串转化为全新的JS对象,从而实现深拷贝,验证方式如下图:

  从输出结果可以看到,1号小人的朋友从钱姓朋友变成了孙姓朋友,2号小人的朋友仍然是钱姓朋友。

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

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

相关文章

2023 亚马逊云科技 re:lnvent 大会探秘: Amazon Connect 全渠道云联络中心

2023 亚马逊云科技 re:lnvent 大会探秘: Amazon Connect 全渠道云联络中心 前言一. Amazon Connect 介绍 🗺️二. Amazon Connect 使用教程 🗺️1.我们打开URl链接找到对应服务2.输入Amazon Connect选中第一个点击进入即可;3.在进入之后我们就…

【C++初阶】八、初识模板(泛型编程、函数模板、类模板)

相关代码gitee自取: C语言学习日记: 加油努力 (gitee.com) 接上期: 【C初阶】七、内存管理 (C/C内存分布、C内存管理方式、operator new / delete 函数、定位new表达式) -CSDN博客 目录 一 . 泛型编程 二 . 函数模板 函数模板…

LeetCode算法练习top100:(10)贪心算法

package top100.贪心算法;import java.util.ArrayList; import java.util.List;public class TOP {//121. 买卖股票的最佳时机public int maxProfit(int[] prices) {int res 0, min prices[0];for (int i 1; i < prices.length; i) {if (prices[i] < min) {min price…

供应链管理:专业词汇积累

一、供应链管理专业词汇积累 序号词汇词汇英文解释1库存持有天数days on hand库存水平的度量标准&#xff0c;等于现有库存数量除以平均每日库存消耗量。2差异&#xff08;化&#xff09;延迟方法delayed differentiation一种供应链管理方法&#xff0c;即尽可能的保留和共享产…

Maven知识

文章目录 一、概念1、官方文档2、什么是Maven&#xff1f; 二、相关知识1、Maven生命周期1.1、clean1.2、default1.3、site 2、Pom文件3、Pom常用元素3.1、项目基本元素3.2、<properties\></properties\>3.3、pom继承相关3.4、依赖管理相关3.5、构建管理相关3.6、&…

使用ffmpeg将图片合成为mp4

首先在在图片文件夹输入cmd 这里确保已经安装ffmpeg并配置好环境变量。 然后这是我的文件夹目录&#xff1a; 将21张图片合成为mp4视频 这里使用如下命令&#xff1a; ffmpeg -framerate 1 -start_number 0 -i %d.png -c:v libx264 -pix_fmt yuv420p output.mp4 -framerat…

设计模式——中介者模式

引言 中介者模式是一种行为设计模式&#xff0c; 能让你减少对象之间混乱无序的依赖关系。 该模式会限制对象之间的直接交互&#xff0c; 迫使它们通过一个中介者对象进行合作。 问题 假如你有一个创建和修改客户资料的对话框&#xff0c; 它由各种控件组成&#xff0c; 例如…

最近IT圈子里有这样一句流行语:“Java已经死了,前端也已经凉了”?

Java与前端的发展前景 最近IT圈子里有这样一句流行语:“Java已经死了,前端也已经凉了”。这种极端看衰的语句似乎在散播焦虑,那么Java和前端的发展前景真的这么差吗? 就业市场而言,Java和前端仍然是最受欢迎的岗位之一。Java拥有强大的生态系统,前端技术发展迅速,都提供大量就…

[渗透测试学习] Analytics - HackTheBox

文章目录 信息搜集漏洞利用内核提权 信息搜集 nmap扫描一下端口 nmap -sV -sC -p- -v --min-rate 1000 10.10.11.233发现两个端口&#xff0c;22端口为ssh服务&#xff0c;80端口有http服务 尝试访问80端口&#xff0c;发现重定向到http://analytical.htb/并且无法访问 编辑/…

Java+Swing: 数据回显和修改功能的实现 整理14

1. 数据回显 其实数据回显就是为修改功能的实现做准备的 1.1 在MainView类中&#xff0c;创建一个方法获取选中行的id // 获取选中的行的idpublic int[] getSelectedRowIds() {int[] selectedRows mainViewTable.getSelectedRows();int[] ids new int[selectedRows.length];…

第六届江苏人工智能大会成功举办,赛氪网荣获“优秀合作伙伴”奖项

2023年12月15日&#xff0c;第六届江苏人工智能大会在南京成功举办。本次大会汇集了众多人工智能领域的专家、学者和企业代表&#xff0c;共同探讨人工智能技术的最新发展和应用。江苏人工智能大会由江苏省人工智能学会&#xff08;简称&#xff1a;JSAI&#xff09;创办于2018…

【每日一题】反转二叉树的奇数层

文章目录 Tag题目来源题目解读解题思路方法一&#xff1a;广度优先搜索方法二&#xff1a;深度优先搜索 写在最后 Tag 【深度优先搜索】【广度优先搜索】【二叉树】【2023-12-15】 题目来源 2415. 反转二叉树的奇数层 题目解读 反转二叉树奇数层的节点。 解题思路 对于二叉…

Java八股文面试全套真题【含答案】- Element Plus篇

什么是Element UI 和 Element Plus&#xff1f; Element UI 和 Element Plus 是基于 Vue.js 的一套非常受欢迎的开源 UI 组件库&#xff0c;用于快速构建具有现代化设计和丰富交互效果的前端界面。Element UI 和 Element Plus 有哪些特点和优势&#xff1f; 提供丰富的组件库&a…

【LeetCode刷题笔记(8-1)】【Python】【接雨水】【动态规划】【困难】

文章目录 引言接雨水题目描述提示 解决方案1&#xff1a;【动态规划】结束语 接雨水 引言 编写通过所有测试案例的代码并不简单&#xff0c;通常需要深思熟虑和理性分析。虽然这些代码能够通过所有的测试案例&#xff0c;但如果不了解代码背后的思考过程&#xff0c;那么这些代…

【扩散模型Diffusion Model系列】0-从VAE开始(隐变量模型、KL散度、最大化似然与AIGC的关系)

VAE VAE(Variational AutoEncoder)&#xff0c;变分自编码器&#xff0c;是一种无监督学习算法&#xff0c;被用于压缩、特征提取和生成式任务。相比于GAN(Generative Adversarial Network)&#xff0c;VAE在数学上有着更加良好的性质&#xff0c;有利于理论的分析和实现。 文…

C++指针

本文章对C指针的使用做一个全面的阐述与解释 1.1指针的定义使用 指针&#xff1a; 通过指针间接访问内存 指针就是地址 看下面代码&#xff1a; #include<iostream> using namespace std; int main(){//1、定义指针int * p;int a 10;//2、使用指针p &a;cout<…

STM32-02-STM32基础知识

文章目录 STM32基础知识1. STM32F103系统架构2. STM32寻址范围3. 存储器映射4. 寄存器映射 STM32基础知识 1. STM32F103系统架构 STM32F103 STM32F103是ST公司基于ARM授权Cortex M3内核而设计的一款芯片&#xff0c;而Cortex M内核使用的是ARM v7-M架构&#xff0c;是为了替代…

根据星历文件实现卫星的动态运行模拟matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 MATLAB2022a 3.部分核心程序 .................................................................................... % …

测试用例的修改更新

测试用例的修改更新是指测试过程中由于用户需求的改变&#xff0c;或者测试过程中发现有新的需求产生&#xff0c;使得测试用例需要进行修改。修改更新测试用例不仅是一种测试技术&#xff0c;更是一种质量保证的方法。但修改和更新测试用例的技术要点在于&#xff1a; 1、执行…

ReactHooks大全—useEffect

React Hooks是一种在函数组件中使用状态和生命周期等特性的方法。useEffect是其中一个常用的Hook&#xff0c;它可以让你在组件渲染后执行一些副作用操作&#xff0c;比如发送网络请求、订阅事件、修改DOM等。在本文中&#xff0c;我们将介绍useEffect的基本使用、实现原理、最…