深入理解JS深浅拷贝

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)))结果如图：我们可以发现有些属性被忽略了：undefinedsymbolfunction可以看得出来JSON实现深拷贝也有不足之处时间有限，未完待续本篇文章接下来将会讨论其他深浅拷贝的方法（如Oeject.assign(),展开运算符）