引用类型值的赋值浅拷贝
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 函数。
网友评论