JavaScript-＞深浅拷贝的缺点

原文链接：点这里跳转

引用类型值的赋值浅拷贝

var arr1 = [1,2,3]

var arr2 = arr1

arr2[0] = -1

console.log(arr1)  // [-1, 2, 3]

console.log(arr2)  // [-1, 2, 3]

Object.assign()

对象里面第一层是基本类型进行深拷贝，对象引用类型进行浅拷贝

var arr1 = {a:0, b: {c: 2}};

var arr2 = Object.assign({}, arr1) 

arr2.b.c = 1

arr2.a = 1

console.log(arr1);  // {a:0, b: {c: 1}};  基本类型深拷贝，引用类型进行浅拷贝

console.log(arr2);  // {a:1, b: {c: 1}};  基本类型深拷贝，引用类型进行浅拷贝

slice() 和 concat()

对基本类型进行深拷贝，对引用类型进行浅拷贝，这两个方法仅适用于对不包含引用对象的一维数组的深拷贝

var arr1 = [1,2,3];

var arr2 = arr1.slice(0);  // 或者 var arr2 = arr1.concat();

arr2[0] = -1;

console.log(arr1); // [1, 2, 3]     基本类型深拷贝，引用类型进行浅拷贝

console.log(arr2);  // [-1, 2, 3]    基本类型深拷贝，引用类型进行浅拷贝

var arr11 = [{a: 1}, {b: 2}];

var arr22 = arr11.slice(0);  // 或者 var arr2 = arr1.concat();

arr22[0].a = 2

console.log(arr11); //  [{a: 2}, {b: 2}];    基本类型深拷贝，引用类型进行浅拷贝

console.log(arr22);  //  [{a: 2}, {b: 2}];     基本类型深拷贝，引用类型进行浅拷贝

JSON.parse(JSON.stringfy)

实现深拷贝原理：堆栈开辟新内存空间，实现深拷贝

var targetObj = JSON.parse(JSON.stringify(obj))     // 就是深拷贝

缺陷：

如果你的对象里有函数，函数无法被拷贝下来

无法拷贝copyObj对象原型链上的属性和方法

实际场景可能对象里并没有函数，原型链上并没有属性和方法，大多数场景可以直接上JSON.parse(JSON.stringify(obj))

递归

缺陷：

爆栈，数据的层次很深，递归就会栈溢出 https://zhuanlan.zhihu.com/p/73411916

循环引用

// 循环引用

var a = {};

a.a = a;

clone(a) // Maximum call stack size exceeded 直接死循环

第三方库

lodash的cloneDeep
本质是递归拷贝，对于数组或者对象中的属性，又会进行一个递归判断，如果该属性(数组便是index)的value是一个number,string，执行结束，交出执行权。如果是数组或者对象，又会继续执行递归

https://blog.csdn.net/weixin_34049948/article/details/88772727

immutable.js的深拷贝
其内部使用了 Trie(字典树) 数据结构, Immutable.js 会把对象所有的 key 进行 hash 映射，将得到的 hash 值转化为二进制，从后向前每 5 位进行分割后再转化为 Trie 树。处理大量数据的情况下和直接深拷贝相比效率高了不少。

https://blog.csdn.net/weixin_33965305/article/details/87958945

proxy和immer的深拷贝
通过拦截 set 和 get 就能达到我们想要的，当然 Object.defineProperty() 也可以。其实immer这个库就是用了这种做法来生成不可变对象的。其原理是建立一个new Map()，判断传入的参数是否被修改过。没有修改过的话就直接返回原数据并且停止这个分支的遍历，如果修改过的话就从copy中取值，然后把整个copy中的属性都执行一遍 finalize 函数。

http://www.javanx.cn/20191217/js-deep-copy/

参考链接： https://www.jianshu.com/p/bfe901f178f6

作者：SophieRabbit
链接：https://www.jianshu.com/p/2795ec5e640f
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。