摘要：为何写最近在研究深浅拷贝，找了很多资料，感觉不是很满意，所以自己就整理了一份。深拷贝如果给放到新的内存中，将的各个属性都复制到新内存里，就是深拷贝。安全的值是指能够呈现为有效格式的值。参考文档冴羽的专题之深浅拷贝深拷贝与浅拷贝的实现
为何写：
最近在研究深浅拷贝，找了很多资料，感觉不是很满意，所以自己就整理了一份。废话不多说，我们来一起复习一下吧，也希望留下您宝贵意见。
何为深浅拷贝？深拷贝和浅拷贝是只针对Object和Array这样的复杂类型的
1.浅拷贝：
我们先来看2个栗子：
let a = {
name: "azi"
}
let b = a;
b.name = "zhangsan";
console.log(a.name); // zhangsan
console.log(b.name); // zhangsan
let a = ["hello","world"] let b = a; b[1]= "azi"; console.log(a); // ["hello", "azi"] console.log(b); // ["hello", "azi"]
从栗子中可以看出：
a和b指向同一块内存，所以修改其中任意的值，另一个值都会随之变化，这就是浅拷贝。
2.深拷贝：
如果给b放到新的内存中，将a的各个属性都复制到新内存里，就是深拷贝。
换句话说，也就是b的属性改变时，a的属性不会跟着变化。
常用的实现方法有哪些？1.浅拷贝：
数组：
Array.slice()、 Array.concat()、 ...
对象：
Object.assign()、 ...
栗子：
// concat concat方法不会改变this或任何作为参数提供的数组，而是返回一个浅拷贝，它包含与原始数组相结合的相同元素的副本 let arr = ["old", 1, true, null, undefined]; let new_arr1 = arr.concat(); new_arr1[0] = "new"; console.log(arr) // ["old", 1, true, null, undefined] console.log(new_arr1) // ["new", 1, true, null, undefined] // slice slice()方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象 let new_arr2 = arr.slice(); new_arr2[0] = "new"; console.log(arr) // ["old", 1, true, null, undefined] console.log(new_arr2) // ["new", 1, true, null, undefined] // ... 扩展运算符 复制数组时候, 拓展语句只会进行浅复制, 因此如下所示, 它并不适合复制多维数组 (与Object.assign() 相同 let new_arr3 = [...arr]; new_arr3[0] = "new"; console.log(arr) // ["old", 1, true, null, undefined] console.log(new_arr3) // ["new", 1, true, null, undefined]
// Object.assign() Object.assign方法只会拷贝源对象自身的并且可枚举的属性到目标对象
let obj1 = {a:0, b:{c:0}};
let obj2 = Object.assign({},obj1);
obj2.b.c =2 ;
obj2.a =2 ;
console.log(obj1); // {a:0,b:{c:2}}
console.log(obj2); // {a:2,b:{c:2}}
// ...
let obj3 = {...obj1};
obj3.b.c =3 ;
obj3.a =3 ;
console.log(obj1); // {a:0,b:{c:3}}
console.log(obj3); // {a:3,b:{c:3}}
2.深拷贝：
JSON.parse( JSON.stringify(arr) )
在使用JSON.stringify() 需要注意一下几点：
1.JSON.stringify(..) 在将 JSON 对象序列化为字符串时和 toString() 的效果基本相同，只不过序列化的结 果总是字符串:
JSON.stringify( 42 ); // "42"
JSON.stringify( "42" ); // ""42""(含有双引号的字符串)
JSON.stringify( null ); // "null"
JSON.stringify( true ); // "true"
2.所有安全的 JSON 值(JSON-safe)都可以使用 JSON.stringify(..) 字符串化。安全的 JSON 值是指能够呈现为有效 JSON 格式的值。
3.undefined、function、symbol (ES6+)和包含循环引用(对象之间相互引用，形成一个无限循环)的对象都不符合 JSON结构标准，支持 JSON 的语言无法处理它们
4.JSON.stringify(..) 在对象中遇到 undefined、function 和 symbol 时会自动将其忽略，在
数组中则会返回 null(以保证单元位置不变)。
例如:
JSON.stringify( undefined ); // undefined
JSON.stringify( function(){} ); // undefined
JSON.stringify([1,undefined,function(){},4]); // "[1,null,null,4]"
JSON.stringify({ a:2, b:function(){} }) // "{"a":2}"
对包含循环引用的对象执行 JSON.stringify(..) 会出错。
当然也可以用JQ的extend 函数的实现，这里就不具体说了。
参考文档：
冴羽的JavaScript专题之深浅拷贝
Alloyteam深拷贝与浅拷贝的实现
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/107139.html
摘要：专题系列第六篇，讲解深浅拷贝的技巧和以及实现深浅拷贝的思路前言拷贝也是面试经典呐数组的浅拷贝如果是数组，我们可以利用数组的一些方法比如返回一个新数组的特性来实现拷贝。所以我们可以看出使用和是一种浅拷贝。 JavaScript 专题系列第六篇，讲解深浅拷贝的技巧和以及实现深浅拷贝的思路 前言 拷贝也是面试经典呐！ 数组的浅拷贝 如果是数组，我们可以利用数组的一些方法比如：slice、co...
摘要：动手实现深拷贝利递归来实现对对象或数组的深拷贝。递归思路对属性中所有引用类型的值进行遍历，直到是基本类型值为止。深拷贝只对对象自有属性进行拷贝测试数据拷贝方式其实也是一种继承的方式，当然继承还是有其他方法的感谢支持 深浅拷贝 基本类型 & 引用类型 ECMAScript中的数据类型可分为两种： 基本类型：undefined,null,Boolean,String,Number,Symb...
摘要：深拷贝相比于浅拷贝速度较慢并且花销较大。所以在赋值完成后，在栈内存就有两个指针指向堆内存同一个数据。结果如下扩展运算符只能对一层进行深拷贝如果拷贝的层数超过了一层的话，那么就会进行浅拷贝那么我们可以看到和展开原算符对于深浅拷贝的结果是一样。 JS中数据类型 基本数据类型： undefined、null、Boolean、Number、String和Symbol(ES6) 引用数据类型：...
摘要：专题系列共计篇，主要研究日常开发中一些功能点的实现，比如防抖节流去重类型判断拷贝最值扁平柯里递归乱序排序等，特点是研究专题之函数组合专题系列第十六篇，讲解函数组合，并且使用柯里化和函数组合实现模式需求我们需要写一个函数，输入，返回。 JavaScript 专题之从零实现 jQuery 的 extend JavaScritp 专题系列第七篇，讲解如何从零实现一个 jQuery 的 ext...
阅读 555·2019-08-30 15:55
阅读 1270·2019-08-30 13:55
阅读 1876·2019-08-29 17:13
阅读 2725·2019-08-29 15:42
阅读 1194·2019-08-26 14:04
阅读 921·2019-08-26 13:31
阅读 3171·2019-08-26 11:34
阅读 710·2019-08-23 18:25
