​浅拷贝与深拷贝​

浅拷贝
与深拷贝

一、数据类型
数据分为基本数据类型(String, Number, Boolean, Null, Undefined,Symbol)和对象数据类型。

基本数据类型的特点:直接存储在栈(stack)中的数据
引用数据类型的特点:存储的是该对象在栈中引用,真实的数据存放在堆内存里

引用数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址。当解释器寻找引用值时,会首先检索其在栈中的地址,取得地址后从堆中获得实体。
在这里插入图片描述

二、浅拷贝与深拷贝
深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。
深拷贝和浅拷贝的示意图大致如下:
在这里插入图片描述

浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象。
三、赋值和浅拷贝的区别
当我们把一个对象赋值给一个新的变量时,赋的其实是该对象的在栈中的地址,而不是堆中的数据。也就是两个对象指向的是同一个存储空间,无论哪个对象发生改变,其实都是改变的存储空间的内容,因此,两个对象是联动的。
浅拷贝是按位拷贝对象,它会创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型,拷贝的就是基本类型的值;如果属性是内存地址(引用类型),拷贝的就是内存地址 ,因此如果其中一个对象改变了这个地址,就会影响到另一个对象。即默认拷贝构造函数只是对对象进行浅拷贝复制(逐个成员依次拷贝),即只复制对象空间而不复制资源。

我们先来看两个例子,对比赋值与浅拷贝会对原对象带来哪些改变?
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
上面例子中,obj1是原始数据,obj2是赋值操作得到,而obj3浅拷贝得到。我们可以很清晰看到对原始数据的影响,具体请看下表:
在这里插入图片描述
四、浅拷贝的实现方式
1.Object.assign()
Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象。但是 Object.assign()进行的是浅拷贝,拷贝的是对象的属性的引用,而不是对象本身。

在这里插入图片描述
注意:当object只有一层的时候,是深拷贝
在这里插入图片描述

2.Array.prototype.concat()

在这里插入图片描述
修改新对象会改到原对象:
在这里插入图片描述
3.Array.prototype.slice()
在这里插入图片描述
同样修改新对象会改到原对象:
在这里插入图片描述
​​
关于Array的slice和concat方法的补充说明:Array的slice和concat方法不修改原数组,只会返回一个浅复制了原数组中的元素的一个新数组。

原数组的元素会按照下述规则拷贝:

如果该元素是个对象引用(不是实际的对象),slice 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变,则新的和原来的数组中的这个元素也会发生改变。
对于字符串、数字及布尔值来说(不是 String、Number 或者 Boolean 对象),slice 会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值,将不会影响另一个数组。

可能这段话晦涩难懂,我们举个例子,将上面的例子小作修改:​​
​​
在这里插入图片描述
在这里插入图片描述

五、深拷贝的实现方式

1.JSON.parse(JSON.stringify())

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

这种方法虽然可以实现数组或对象深拷贝,但不能处理函数

在这里插入图片描述
在这里插入图片描述

这是因为JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串,不能接受函数

2.手写递归方法
递归方法实现深度克隆原理:遍历对象、数组直到里边都是基本数据类型,然后再去复制,就是深度拷贝

在这里插入图片描述
3.函数库lodash
该函数库也有提供_.cloneDeep用来做 Deep Copy

在这里插入图片描述

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

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

相关文章

更改微信小程序的基础版本库;更改uni-app小程序基础库;更改用户的微信小程序基础库最低版本;设置用户的微信小程序版本库;

需求场景:微信小程序不少API都有最低版本支持,为了避免不必要的麻烦,我们可以根据需要给小程序设置基础库最低版本,这样若用户使用的基础库版本低于设置的最低版本要求,则无法正常使用小程序,并提示更新微信…

[python-thirdLib] Python中第三方的用于解析HTML的库:BeautifulSoup

From: http://www.crifan.com/python_third_party_lib_html_parser_beautifulsoup/ 背景 在Python去写爬虫,网页解析等过程中,比如: 如何用Python,C#等语言去实现抓取静态网页抓取动态网页模拟登陆网站 常常需要涉及到HTML等网…

VMware 常见使用问题梳理

1.“Transport(VMDB)error -44:Message” 这种情况说明虚拟机的一个服务没有开启,在本机中找到服务:“打开运行”-“services.msc”回车。找到VMware Authorization Service这个服务,启动起来就OK了。 2.提示”此虚拟机被配置为64位操作系统…

图灵社区 : 阅读 : 谁说Vim不是IDE?(三)

图灵社区 : 阅读 : 谁说Vim不是IDE?(三)Powerline1、下载地址https://github.com/Lokaltog/vim-powerline2、功能说明Powerline是Vim的一个非常漂亮的状态栏插件,安装了Powerline之后,Vim底部将会出现一个增强型状态栏…

uni-app小程序onShow执行两次;微信小程序onShow重复执行原因;导航栏tabBar页的onLoad函数不执行;App.vue页的onShow执行原因;onShow莫名其妙执行

1.只有五种情况会触发导航栏tabBar页的onLoad函数,分别是: –1.1:首次进入到导航栏tabBar页面; –1.2:从微信分享进入的导航栏tabBar页面; –1.3:识别二维码跳转到小程序的导航栏tabBar页面&…

用fiddler抓包小程序

第一步:安装fiddler,保证手机和PC端在同一个wifi下; 第二步:设置属性按图勾选第三步:以上两步设置完后,重启下fiddler(解决本地服务器不能访问),然后查看本地IP地址第四步:手机设置HTTP代理 我的…

[Python2.x] 标准库 urllib2 的使用细节

From: http://www.cnblogs.com/yuxc/archive/2011/08/01/2123995.html 刚好用到,这篇文章写得不错,转过来收藏。 转载自 道可道 | Python 标准库 urllib2 的使用细节 Python 标准库中有很多实用的工具类,但是在具体使用时,标准…

草稿--Windows消息机制

消息本身是作为一个记录传递给应用程序的,这个记录中包含了消息的类型以及其他信息。 MSG含有来自windows应用程序消息队列的消息信息,它在Windows中声明如下:typedef struct tagMsg{HWND hwnd; // 接受该消息的窗口句柄UINT mes…

微信小程序保存图片到相册;uni-app小程序保存网络图片到相册;小程序保存图片到相册拒绝授权后重新拉起授权;保存图片到系统相册;小程序保存图片测试可以,真机保存图片失败

文末代码可以直接复制使用,图片修改成你的图片路径即可 一、场景: 小程序点击按钮,保存项目内的静态图片或者微信头像或者后端返回的图片; 二、注意点及思路拆分: –2.1:小程序保存图片功能,必须…

数组(待完成)

创建 字面量方式 var arr []; var arr ["成员1", 2];//可以是不同成员构造函数方式 空的 var array new Array(); 指定长度 var array2 new Array(10); 成员值都是undefined。此方式有技巧使用 虽然值是undefined,但join后不会出现undefined字符串 比…

VMware打开虚拟机黑屏

排除系统崩溃的情况,比如开机输入密码之后系统黑屏,此原因是由于显示选项开启了3D加速导致的,具体修改步骤: VM->Settings->Hardware->Display 在右面的内容栏中将 Accelerate 3D graphics 取消打勾,然后重启…

[python3.x] 利用chardet检测网页编码

环境:Win7_x64 python3.4.3 需要先下载chardet并进行安装,下载地址:https://pypi.python.org/packages/source/c/chardet/chardet-2.3.0.tar.gz 安装:进入解压后的目录,在命令窗口执行: python setup.py install 写…

js moment时间戳与时间格式相互转换

var moment require(moment) 获取时间戳 : var res moment(Date.now(), YYYY-MM-DD HH:mm:ss).valueOf(); 获取格式时间: var res moment(Date.now()).format(YYYY-MM-DD HH:mm:ss);

微信小程序中base64转换成图片;uni-app小程序base64转图片;微信小程序base64文件转图片;微信小程序base64图片转图片

将微信小程序的图片转成base64 点击此链接看另一篇 以下是将后端返回的base64转成图片: 方法1:使用微信小程序自带方法 //把base64转换成图片getBase64ImageUrl: (base64Url) {/// 获取到base64Datavar base64Data base64Url;/// 通过微信小程序自带方…

PHP流式上传和表单上传(美图秀秀)

最近需要开发一个头像上传的功能&#xff0c;找了很多都需要授权的&#xff0c;后来找到了美图秀秀&#xff0c;功能非常好用。 <?php /*** Note:for octet-stream upload* 这个是流式上传PHP文件* Please be amended accordingly based on the actual situation*/ $post_i…

Linux下如何安装最新版本工具

此博文主要考虑到两个方面的需求&#xff1a; 1.主机处于离线状态&#xff0c;需要离线安装相关工具包&#xff1b; 2.主机的软件源不是最新的&#xff0c;通过在线更新无法达到需求的版本&#xff1b; 此文以获取openssh相关工具包&#xff0c;其他工具包原理类似&#xff…

element-ui 设置table width %百分比

这里的width12设置成min-width!2% 记得所有column都设置百分比哦 <el-table-columnprop"date"label"日期"min-width"12%"></el-table-column>

笔记一

1、logo用<a>标签包围 并给img设置&#xff1a;border&#xff1a;0&#xff08;放置IE浏览器出现框&#xff09; 2、搜索框内有图片&#xff0c;处理方式&#xff1a; 父级div设置border&#xff0c;并调好位置 子级input设置border 0 ;height 100% 图标用<span>包…

[笔记]java-package

[笔记]java&#xff0d;package import 关键字导入一个完整的库时,就会获得“包”(Package)。例如: import java.util.*; 若想导入单独一个类,可在 import 语句里指定那个类的名字: import java.util.Vector; 为 Java 创建一个源码文件的时候,它通常叫作一个“编辑单元”(有时也…

如何安装sshd服务用于远程登录

此博文前提是系统默认没有安装openssh-server&#xff0c;而且现在大部分系统默认只包含openssh-client&#xff0c;这对于需要远程调试和管理的开发者们很不方便&#xff0c;因此本文探讨如何离线安装sshd服务&#xff0c;对于可以在线安装的就比较方便了&#xff0c;可参阅其…