js深拷贝与浅拷贝
1 基础知识:基本类型与引用类型
JS中可以把变量分成两部分,基本类型和引用类型。
基本类型包括:Undefined、Null、Boolean、Number和String;
引用类型值可能由多个值构成的对象。
在对基础类型数据进行拷贝时,实际相当于创建新的相同数据'hello',赋值给b
var a='hello';
var b = a;
b = 'world';
console.log(a);//"hello"
在对引用类型数据进行拷贝时,操作的不是实际的对象而是对象的引用,通过指针指向相同的内存区域,所以值相等;
在下面的代码中,因为arr和arr1指向同一内存区域,所以当改变arr1的值时,arr也跟着改变了
var arr = ['1','2'];
var arr1 = arr;
arr1[0] = '11';
console.log(arr); //["11", "2"]
2 浅拷贝
当我们在对引用类型数据进行拷贝时,就会产生类似上面子对象数据改变引起父对象数据同时改变的情况,这种拷贝就叫浅拷贝。
function shallowCopy(src) {
var dst = {};
for (var prop in src) {
dst[prop] = src[prop];
}
return dst;
} var xiaoming = {hobby:['唱歌','书法']};
var xiaoli = shallowCopy(xiaoming); //如果将拷贝后的对象xiaoli的爱好更改,原对象xiaoming就也被更改了
// 因为xiaoli的hobby属性是个数组,即引用类型的数据,所以复制到的内容只是一个内存地址,并不是创建的新内容,详情请参考js的基本类型和引用类型
xiaoli.hobby[0] = '画画';
console.log(xiaoming);//{hobby: ["画画", "书法"]} 小明的内容也别改变了
3深拷贝
实现深拷贝的方法就是将浅拷贝递归,让每一次赋值都通过基础类型的创建新数据的赋值方式进行赋值
function deepCopy(src,dst){
var dst = dst || {};
for (var i in src) {
if (typeof src[i] === 'object') {
dst[i] = (src[i].constructor === Array) ? [] : {};
deepCopy(src[i],dst[i]);
}else{
dst[i] = src[i];
}
}
return dst;
} var xiaoming2 = {hobby:['唱歌','书法']};
var xiaoli2 = deepCopy(xiaoming2);
xiaoli2.hobby[0] = '画画';
console.log(xiaoming2);//{hobby: ["唱歌", "书法"]} xiaoming的内容不变
4 代码地址 :http://jsbin.com/namajic/edit?js,console,output
js深拷贝与浅拷贝的更多相关文章
- js 深拷贝和浅拷贝
js 深拷贝和浅拷贝 先举一下项目中遇到的两个例子: 例子1: var json = $.parseJSON(data.data);//data.data是接口返回的值var a = json.cha ...
- 老生常谈之js深拷贝与浅拷贝
前言 经常会在一些网站或博客看到"深克隆","浅克隆"这两个名词,其实这个很好理解,今天我们就在这里分析一下js深拷贝和浅拷贝. 浅拷贝 我们先以一个例子来说明 ...
- 关于JS深拷贝和浅拷贝
最近在前端开发中遇到一些问题,就是数组中的某个对象或某个对象的值改变之后,在不刷新页面的时候需要重新渲染值时,页面显示的还是原来的数据.比如: data{ A:[{id:1,num:1},{id:2, ...
- 在vue中子组件修改props引发的对js深拷贝和浅拷贝的思考
不管是react还是vue,父级组件与子组件的通信都是通过props来实现的,在vue中父组件的props遵循的是单向数据流,用官方的话说就是,父级的props的更新会向下流动到子组件中,反之则不行. ...
- JS 深拷贝和浅拷贝概念,以及实现深拷贝的三种方式
一.理解堆栈,基本数据类型与引用数据类型 1.堆栈 栈(stack):系统自动分配的内存空间,内存会由系统自动释放,用来存放函数的参数值,局部变量的值等,特点是先进后出. 堆(heap):系统动态分配 ...
- 面试遇到的坑JS深拷贝和浅拷贝
首先要搞明白深拷贝和钱拷贝的区别要先搞明白 栈和堆的区别 一.栈 栈存储基础数据类型,如: String.Number.Boolean.Null.Underined,这些简单的基础数据类型能够直接存储 ...
- js深拷贝、浅拷贝
浅拷贝: 只针对当前对象的属性进行拷贝,若当前对象的属性是引用类型时,这个不考虑,不进行拷贝.若属性是引用类型,拷贝后引用的是地址,如果进行更改,会影响拷贝的原对象属性. 深拷贝:针对当前对象的数据的 ...
- js 深拷贝和浅拷贝理解
作者:进击的袋鼠链接:https://www.zhihu.com/question/23031215/answer/124017500来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载 ...
- [转] js深拷贝和浅拷贝
一.数组的深浅拷贝 在使用JavaScript对数组进行操作的时候,我们经常需要将数组进行备份,事实证明如果只是简单的将它赋予其他变量,那么我们只要更改其中的任何一个,然后其他的也会跟着改变,这就导致 ...
随机推荐
- ppt复制文本框文字到word的方法
打开ppt按Alt+F11,插入--模块, 选中“工具”--“引用”--MicroSoft Word .. 复制代码: Sub Main() On Error Resume Next Dim tem ...
- oracle用户间表数据复制迁移
如system用户要将scott中的emp表倒入其中,按如下方法: 1.登录scott用户 2.给system用户赋予查询emp标的权限: grant select on emp to system; ...
- as3.0 嵌入字体的用法
var txt:TextField = new TextField();//创建文本 txt.embedFonts=true;//确定嵌入字体 var font:Font=new MyFont();/ ...
- 音频音乐播放 Service
界面效果: 界面就一个播放的Button和一个进度条SeekBar,也可以自己加上两个显示时间的TextView: 点击播放时,有音乐声音,进度条也会自动更新,Button文字变成暂停 ...
- Springboot学习05-自定义错误页面完整分析
Springboot学习06-自定义错误页面完整分析 前言 接着上一篇博客,继续分析Springboot错误页面问题 正文 1-自定义浏览器错误页面(只要将自己的错误页面放在指定的路径下即可) 1-1 ...
- 450. Delete Node in a BST 删除bst中的一个节点
[抄题]: Given a root node reference of a BST and a key, delete the node with the given key in the BST. ...
- 操作系统学习笔记(三) windows内存管理
//系统物理页面是由 (Page Frame Number Database )简称PFN数据库来进行管理,实际上是一个数组,每个物理页面都对应一个PFN项. 进程的地址空间是通过VAD(Virtua ...
- python_day10
目录: 并发多线程 协程 I/O多路复用(未完成,待续) 一.并发多线程 1.线程简述: 一条流水线的执行过程是一个线程,一条流水线必须属于一个车间,一个车间的运行过程就是一个进程(一个进程内至少一个 ...
- solr7.7.0搜索引擎使用(三)(添加文件索引)
众所周知,solr与es的最大区别是,solr可以对pdf,txt,doc等文件生成索引 那我们如何添加文件索引呢? 步骤1.添加core,取名暂且为 coreFile 在bin下执行命令 ./sol ...
- qhfl-9 微信模板消息推送
开发中用的是测试号 微信公众号认证流程 用户登陆 <!DOCTYPE html> <html lang="en"> <head> <met ...