最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

深入理解JS深浅拷贝

XAMPP教程 admin 600浏览 0评论
 JS中数据类型
基本数据类型: undefined、null、Boolean、Number、String和Symbol(ES6)
引用数据类型: Object(Array, Date, RegExp, Function)
深浅拷贝
深浅拷贝只是针对引用类型的,因为引用类型是存放在堆内存中,在栈地址有一个或者多个地址来指向推内存的某一数据

浅拷贝:
被复制对象的所有变量都含有与原来的对象相同的值,而所有的对其他对象的引用仍然指向原来的对象。

浅拷贝仅仅复制所考虑的对象,而不复制它所引用的对象,如果你修改了“副本”的值,那么原来的对象也会被修改

注意:浅拷贝只进行一层拷贝

深拷贝:
深拷贝是一个整个独立的对象拷贝,深拷贝会拷贝所有的属性,并拷贝属性指向的动态分配的内存。当对象和它所引用的对象一起拷贝时即发生深拷贝。深拷贝相比于浅拷贝速度较慢并且花销较大。

深拷贝把要复制的对象所引用的对象都复制了一遍。如果你修改了“副本”的值,那么原来的对象不会被修改,两者是相互独立的。

注意:深拷贝无限层拷贝

用例子看深浅拷贝
赋值实现浅拷贝
let arr = [22, 44, 66, 88];
let co = arr;
co[0] = 11;
console.log(arr, co);

我们本来想把 arr 赋值给 co ,当我们修改co数组中第一个元素时,却发现了原始数组arr发生了改变
很显然,这就是一个浅拷贝的例子

原理:
对于引用类型,赋值操作符只是把存放在栈内容中的指针赋值给另外一个变量。
所以在赋值完成后,在栈内存就有两个指针指向堆内存同一个数据。
也就可以说两个变量在共用着同一个数据,这就是浅拷贝。
JSON实现深拷贝
let arr = [22, 44, 66, 88];
let jso = JSON.parse(JSON.stringify(arr));
jso[0] = 11;
console.log(arr, jso);

对比之前赋值的结果,我们发现原来的数组arr并没有被改变,可以说两者是相互独立的
很显然,这就是一个深拷贝的例子

原理:
JSON.parse() 方法用于将一个 JSON 字符串转换为对象。
JSON.stringify() 方法用于将 JavaScript 值(通常为对象或数组)转换为 JSON 字符串。
在JSON.stringify()完成后,对象就转为了字符串,也就可以说实实在在的复制了一个值,不存在引用之说。
再利用JSON.parse()转为对象,这样达到深拷贝的目的
JSON实现深拷贝的缺陷:
来看下面例子:

let obj = {
nul: null,
und: undefined,
sym: Symbol(‘sym’),
str: ‘str’,
bol: true,
num: 45,
arr: [1, 4],
reg: /[0-9]/,
dat: new Date(),
fun: function() {},
}
console.log(JSON.parse(JSON.stringify(obj)))

我们可以发现有些属性被忽略了:

undefined
symbol
function
可以看得出来JSON实现深拷贝也有不足之处

时间有限,未完待续
本篇文章接下来将会讨论其他深浅拷贝的方法(如Oeject.assign(),展开运算符)

转载请注明:XAMPP中文组官网 » 深入理解JS深浅拷贝

您必须 登录 才能发表评论!