前端开发中,一般情况下,很少会去在意深拷贝浅拷贝的关系。

大家知道,js变量有2种数据类型:基本类型和引用类型。基本类型的拷贝是将整个值完全拷贝一份的,也就是深拷贝。就是开辟了新的堆内存。所以基本类型没有浅拷贝。

引用类型有哪些呢?比如:Object、Array、Function类型均为引用类型。

拷贝基本类型时,普通赋值可以拷贝整个值,而拷贝引用类型,普通赋值只能拷贝地址

但有些时候,因为变量只是采用浅拷贝的形式赋值的。导致逻辑。

比如以我以前做过的一个需求遇到的一个问题:

搜索筛选:

首先最初是没有筛选的,各种筛选项都是最初的全部。用户选中筛选向后可进行筛选搜索,点击清空即可回到最初的筛选方式进行搜索。

于是我就将每种类型筛选的值合并赋值为一个对象obj,初始化obj每个key的value值都是0,拷贝一个oldObj保存初始的值,筛选时,改变obj对应值,发送搜索action时,将obj带过去就可以了。清空时,obj设置为oldObj即可。但当时并没有了解深浅拷贝的问题,导致花费了很多时间。

其实当时只用了浅拷贝,而没有采用深拷贝。导致我改变obj,使oldObj也改变了。

来看看深浅拷贝的理解吧。

浅拷贝:(影响到原来的)

将a赋值给b,改变b的值,a也发生的改变。

因a与b指向同一个堆内存

结果:

深拷贝:(互不影响)

将a赋值给b,改变b的值,a不会被影响

开辟新的堆内存

采用先将对象转字符串,然后将字符串转回对象的方式

结果:

还有一种深拷贝方式(推荐使用):

另一种深拷贝方式(并不是很推荐用):

这个是调用和结果:

总结:深拷贝不是必须要使用的。但是有类似的问题却可以考虑使用。

关于js浅拷贝与深拷贝的理解的更多相关文章

  1. JS - 浅拷贝与深拷贝的理解以及简单实现方法

    前几天撸项目代码时, 由一个技术点间接牵扯出了这东西. 所以就来总结一下. 深拷贝 拷贝对象每个层级的属性. 作用的对象是 js中引用类型的对象,基本类型没有涉及. 本质上将引用类型的对象在堆上重新开 ...

  2. 理解js浅拷贝和深拷贝

    理解深拷贝和浅拷贝之前先了解下js中的基本类型和引用类型 1.基本类型: 在js中,数据的基本类型undefined,null,string,number,boolean,在变量中赋的实际值,基本类型 ...

  3. c#中浅拷贝和深拷贝的理解

    c#中拷贝有浅拷贝和深拷贝之分. 例如对象A,其中有值类型字段和引用类型字段: 1.浅拷贝: 对于值类型字段,直接逐位复制到新拷贝的副本对象中,修改副本的字段的值,不会影响源对象中字段的值: 对于引用 ...

  4. Java 浅拷贝和深拷贝的理解和实现方式

    Java中的对象拷贝(Object Copy)指的是将一个对象的所有属性(成员变量)拷贝到另一个有着相同类类型的对象中去.举例说明:比如,对象A和对象B都属于类S,具有属性a和b.那么对对象A进行拷贝 ...

  5. 【转】Java 浅拷贝和深拷贝的理解和实现方式

    Java中的对象拷贝(Object Copy)指的是将一个对象的所有属性(成员变量)拷贝到另一个有着相同类类型的对象中去.举例说明:比如,对象A和对象B都属于类S,具有属性a和b.那么对对象A进行拷贝 ...

  6. 关于JS浅拷贝和深拷贝

    在 JS 中有一些基本类型像是Number.String.Boolean,而对象就是像这样的东西{ name: 'Larry', skill: 'Node.js' },对象跟基本类型最大的不同就在于他 ...

  7. 浅谈Javascript 浅拷贝和深拷贝的理解

    javascript中存储对象都是存地址的. 浅拷贝:浅拷贝是都指向同一块内存区块,浅拷贝共用同一内存地址,你改值我也变.如果拷贝的对象里面的值是一个对象或者数组,它就是浅拷贝,拷贝的知识引用地址.  ...

  8. js 浅拷贝和深拷贝

    传值与传址 了解了基本数据类型与引用类型的区别之后,我们就应该能明白传值与传址的区别了.在我们进行赋值操作的时候,基本数据类型的赋值(=)是在内存中新开辟一段栈内存,然后再把再将值赋值到新的栈中.例如 ...

  9. 前端【JS】,深拷贝与浅拷贝的区别及详解!

    我是前端小白一枚,为了巩固知识和增强记忆,开始整理相关的知识,方便以后复习和面试的时候看看.OK,让我们进入正题~ 先说说浅拷贝和深拷贝的理解吧,个人是这样理解的:两个对象A.B, A有数据B为空,B ...

随机推荐

  1. python的__getitem__

    #这个方法返回与指定键相关的值.对序列来说,键应该是0~n-1的整数,其中n为序列的长度.对映射来说,键可以是任何类型. class Test(object): def __init__(self): ...

  2. 进程间通信IPC机制和生产者消费者模型

    1.由于进程之间内存隔离,那么要修改共享数据时可以利用IPC机制 我们利用队列去处理相应数据 #管道 #队列=管道+锁 from multiprocessing import Queue # q=Qu ...

  3. ES7 async 函数

    async 函数 let getdata=function(){ return new Promise((resolve,reject)=>{ resolve('aaa'); }) } let ...

  4. MySQL操作数据库--与MySQL零距离接触1-7

    第一章 1-7操作数据库 数据库是一个集合:表 索引等. MySQL语句规范: 关键字与函数名称全部大写 数据库名称.表名称.字段名称全部小写 SQL语句必须以分号结尾 语法结构:       {}: ...

  5. fill和memset的区别

    https://blog.csdn.net/xs18952904/article/details/75195412 memset只能初始化成为0或者-1,其他都要用fill来完成. #include& ...

  6. GO language for windows

    我记得我们已经下载完成了windows 下Go 的安装包 go1.9.windows-amd64.msi下面接着说吧 GO 在Windows 上也是按照linux 惯例来编程的,所以,你还需要一个wi ...

  7. mac install wget

    没有Wget的日子是非常难过的,强大的Mac OS 下安装Wget非常简单 下载一个Wget的源码包,http://www.gnu.org/software/wget/ ftp下载地址:ftp://f ...

  8. [6]传奇3服务器源码分析一GameGate

    1. 2. 留存 服务端下载地址: 点击这里

  9. 擠出機步進馬達的 Steps per Unit 該如何計算?

    擠出機步進馬達的 Steps per Unit 該如何計算?   這邊 Steps per Unit 指的是塑料往前推進1mm,步進馬達須要走幾步.依此定義,可知計算方式可以用 步進馬達轉一圈需要的步 ...

  10. sitecore中的两种编辑工具介绍

    在Sitecore中,有两种编辑工具,您可以在其中创建和编辑网站上的内容: 内容编辑器 - 专为熟悉Sitecore及其包含的功能的经验丰富的内容作者而设计的应用程序. 体验编辑器 - 一种直观的编辑 ...