理解深拷贝和浅拷贝之前先了解下js中的基本类型和引用类型

1、基本类型:

在js中,数据的基本类型undefined,null,string,number,boolean,在变量中赋的实际值,基本类型就是简单的数据段。

基本类型的值是不可以改变的

var a = 1;

var b = a;

a++;

console.log(a); //2

console.log(b); //1

这里a和b是独立的,当改变a或b,其另外一个值不会随之改变

2、引用类型:

在js中,数据的引用类型object,Array,RegExp,date,function,在变量中赋的实际值

引用类型的值是可以改变的

var arr = [1,2,3,4,5];

var arr2 = arr;

arr[0] = 2;

console.log(arr); //[2、2、3、4、5]

console.log(arr2);//[2、2、3、4、5]

这里在改变arr[0]中的值后,arr2数据也跟着改变,引用类型在赋值的时候(arr2=arr),其实在栈内存中添加了arr2,但是堆内存中还是[1,2,3,4,5],通俗点讲就是引用类型赋值并非真正意义上的数据赋值,而是在栈内存中添加一个指针,还是指向堆内存中的[1,2,3,4,5],只添加栈内存的指针

好,到这里我们在讨论深拷贝和浅拷贝,深拷贝顾名思义是在数据是相互独立的,改数据而另一个不受影响,浅拷贝则是数据会随之改变而改变。

这么一看,基本类型不正好是嘛,数据都是相互独立的,乍看好像还真是的。

但是,但是,我们所说的深拷贝必须要在复杂的object类型下,基本类型里没有object,那么只能是引用类型。

再来看个例子:

var arr3 = [[1,2],3,4,5];

var arr4 = arr3;

arr3[0][1] = 3;

console.log(arr3); //[[1,3],3,4,5]

console.log(arr4); //[[1,3],3,4,5]

明明改了arr3,为何arr4也改了,这不是我想要的,那如何独立呢,你会发现使用什么for循环,slice,concat是根本不管用的,网上有其他的坑,在此我就不多说了,直接说解决办法

方法1、JSON

利用JSON.stringify和JSON.parse

var arr3 = [[1,2],3,4,5];

var arr4 = JSON.parse(JSON.stringify(arr3));

arr3[0][1] = 3;

console.log(arr3); //[[1,3],3,4,5]

console.log(arr4); //[[1,2],3,4,5]

但是这种方法有个小弊端,就是值不能为undefined或null,最好对数据提前判断

方法2、jq $.extend

$.extend([deep],target,object1[,objextN]);    //deep 值为true或false,true为深拷贝,false为浅拷贝。target 目标对象,其他对象的成员属性将被附加到该对象上 object1/objextN 是需要被操作的对象,可以是多个,这里是例子中的arr3

var arr3 = [[1,2],3,4,5];

var arr4 = $.extend(true,[],arr3);

arr3[0][1] = 3;

console.log(arr3); //[[1,3],3,4,5]

console.log(arr4); //[[1,2],3,4,5]

以上就是介绍的两种方法

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

  1. 关于js浅拷贝与深拷贝的理解

    前端开发中,一般情况下,很少会去在意深拷贝与浅拷贝的关系. 大家知道,js变量有2种数据类型:基本类型和引用类型.基本类型的拷贝是将整个值完全拷贝一份的,也就是深拷贝.就是开辟了新的堆内存.所以基本类 ...

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

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

  3. 一篇文章理解JS数据类型、深拷贝和浅拷贝

    前言 笔者最近整理了一些前端技术文章,如果有兴趣可以参考这里:muwoo blogs.接下来我们进入正片: js 数据类型 六种 基本数据类型: Boolean. 布尔值,true 和 false. ...

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

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

  5. js 浅拷贝和深拷贝

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

  6. 我的Python学习笔记(二):浅拷贝和深拷贝

    在Python中,对象赋值,拷贝(浅拷贝和深拷贝)之间是有差异的,我们通过下列代码来介绍其区别 一.对象赋值 对象赋值不会复制对象,它只会复制一个对象引用,不会开辟新的内存空间 如下例所示,将test ...

  7. JS 对象的深拷贝和浅拷贝

    转载于原文:https://www.cnblogs.com/dabingqi/p/8502932.html 这篇文章是转载于上面的链接地址,觉得写的非常好,所以收藏了,感谢原创作者的分享. 浅拷贝和深 ...

  8. Javascript/js 的浅拷贝与深拷贝(复制)学习随笔

    js变量的数据类型值分基本类型值和引用类型值. 在ES6(ECMAScript6)以前,基本数据类型包括String.Number.Boolean.Undefined.Null. 基本类型值的复制(拷 ...

  9. js中浅拷贝和深拷贝以及深拷贝的实现

    前言:2019年的第一篇分享... 一.什么是基本类型值和引用类型值?ECMAScript包括两个不同类型的值:基本数据类型和引用数据类型.基本数据类型指的是简单的数据段,引用数据类型指的是有多个值构 ...

随机推荐

  1. shell编程之trap命令

    trap command  signal trap捕获信号(软中断),command一般是linux命令 若为' '表示发生陷阱时为空指令,'-'表示发生陷阱时采用缺省指令 signal: HUP(1 ...

  2. 一文带你玩转对象存储COS文档预览

    随着"互联网+"的发展,各行各业纷纷"去纸化",商务合同.会议纪要.组织公文.商品图片.培训视频.学习课件.随堂讲义等电子文档无处不在.而要查看文档一般需要先下 ...

  3. 解决SSH显示中文乱码的问题(cent os7)

    用SSH连接服务器显示中文乱码,试过修改SSH端,不成功.这次从服务器端下手 1.先查看服务器现有的字符集 [root@dm01 ~]# locale -a 在结果中找到 如果没有支持的字符集就需要安 ...

  4. Python_爬虫_案例汇总:

    1.豆瓣采集 1 #coding:utf-8 2 #采集豆瓣书信息和图片,写进数据库 3 4 from urllib import request 5 # from bs4 import Beauti ...

  5. C++ const的自我理解

    C++学习笔记–const const 是 constant 的缩写,本意是不变的,不易改变的意思.在 C++ 中是用来修饰内置类型变量,自定义对象,成员函数,返回值,函数参数. C++ const ...

  6. 死磕以太坊源码分析之rlpx协议

    死磕以太坊源码分析之rlpx协议 本文主要参考自eth官方文档:rlpx协议 符号 X || Y:表示X和Y的串联 X ^ Y: X和Y按位异或 X[:N]:X的前N个字节 [X, Y, Z, ... ...

  7. 无论PC还是Mac,都能畅快地使用移动硬盘

    如果你拥有一台Mac设备,总会遇到尴尬的那一刻--你在Mac上用得好好的移动硬盘怎么都不能被PC识别到.又或者你朋友在PC上用得好好的移动硬盘,连上你的Mac后,Mac里的文件死活就是拷贝不进移动硬盘 ...

  8. 使用CleanMyMac快速管理应用程序 优化Mac

    CleanMyMac作为一款专业的苹果电脑清理软件,它不仅仅能单纯的卸载不用.少用的应用,同时还支持:1.清理应用程序的数据文件,将应用重置回初始状态,减少空间占用:2.自动检查应用更新,保持应用的最 ...

  9. Fruity Parametric EQ 2使用说明(二)——FL Studio插件教程

    Fruity Parametric EQ 2均衡器,是一款我们在FL Studio制作音乐时经常会用到的插件,它是EQ中的战斗鸡,它不仅有一个高级的 7 波段参数均衡器,还具有声谱分析能力.我们在对很 ...

  10. yii2.0 删除文件夹

    /** * 删除文件缓存 */public function actionDelfilecache(){ $cachePath = Yii::getAlias('@app/runtime/cache' ...