博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
重新梳理下js中的深拷贝和浅拷贝
阅读量:6975 次
发布时间:2019-06-27

本文共 1330 字,大约阅读时间需要 4 分钟。

参考链接:

浅拷贝:

1.最简单的浅拷贝就赋值。

由于js中的对象都是复杂数据类型,这种数据在内存中存储的时候,存放在堆中。当简单赋值的时候,其实是将该对象的指针指向同一个堆地址。

简单的数据类型存放在栈中,当对简单的数据类型进行赋值的时候,其实就是直接在栈中新开辟一个地方专门来存储一样的值。

所谓的浅拷贝就是,后面的对象和前面的对象在第一层数据结构中指向同一个堆地址。但是如果前面的数据不止有一层,如:

let obj = { a: {a: "hello", b: 21} };

此时,使用Object.assign()和...Object方式实现的都是浅拷贝。

此时,第一层数据虽然指向了另一个新的堆地址,但是它内部的子对象的指针却还是同一个地址。这种情况也属于浅拷贝,只不过是比那种直接赋值(直接复制堆地址)的方式要深刻一些。

2.数组和对象的浅拷贝

数组的浅拷贝,有三种方式:

(1) arr1 = arr2;(2) arr2 = arr1.slice(0);(3) arr2 = arr1.concat();

对象的浅拷贝,也有3种方式:

(1) obj2 = obj1;(2) obj2 = Object.assign(obj1 ,{} )(3) obj2 = {...obj1}

深拷贝

对象的深拷贝实际上就是,将前一个对象复制一份给后面的那个对象,不管前面的那个对象中的数据结构嵌套有多深,当改变其中一个对象中的任意深度的某个值后,另一个对象中的该值不会受任何影响。

1.当对象中的所有属性值都是简单数据类型的时候:

function easyCopy(p) {  var c = {};  for (var i in p) {    c[i] = p[i];    }  c.uber = p;  return c;}

2.当要复制的对象中存在某个属性的value值是对象或者数组时:

如果像上面的简单类型那样直接赋值,那么子对象对应的属性实际上指向的是和被拷贝对象中子对象一样的内存地址。因此,只要改了一个,另一个也会跟着改变。

function deepCopy(p, c) {    let c = c || {};    for (let i in p) {        if(! p.hasOwnProperty(i)){            continue;        }        if (typeof p[i] === 'object') {            c[i] = (p[i].constructor === Array) ? [] : {};            deepCopy(p[i], c[i]);        } else {            c[i] = p[i];        }    }    return c;}Parent = {name: 'foo', birthPlaces: ['北京','上海','香港']}var Child = deepCopy(Parent);

总结:

浅拷贝:你变我也变,嵌套对象变,就会跟着变。
深拷贝:管你怎么变,互不影响。

转载地址:http://udrsl.baihongyu.com/

你可能感兴趣的文章
Linux开机禁用开启防火墙
查看>>
js事件之event.preventDefault()与event.stopPropagation()用法区别
查看>>
Ubuntu 上 执行命令 java -version 显示 没有那个文件或目录
查看>>
jQuery补充之jQuery扩展/form表单提交/滚动菜单
查看>>
Html5拖拽复制
查看>>
Intel Code Challenge Elimination Round (Div.1 + Div.2, combined) A. Broken Clock 水题
查看>>
An attempt was made to load a program with an incorrect format
查看>>
Spark RDD概念学习系列之Spark Hash Shuffle内幕彻底解密(二十)
查看>>
期货术语-关于升、贴水,点价,洗船
查看>>
ASP.NET Core 中文文档 第四章 MVC(4.5)测试控制器逻辑
查看>>
js基础参数获取
查看>>
第二百三十六节,Bootstrap辅组类和响应式工具
查看>>
Android SDK安装时出错“android Failed to rename directory”的解决方法
查看>>
PHP无限极分类 - 2 - 无限极评论
查看>>
TCP协议
查看>>
php信号处理
查看>>
drools 的一个小demo
查看>>
python celery 多work多队列
查看>>
一个登陆框引起的血案
查看>>
swagger2 如何匹配多个controller
查看>>