引用類(lèi)型值的賦值淺拷貝
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()
對(duì)象里面第一層是基本類(lèi)型進(jìn)行深拷貝华糖,對(duì)象引用類(lèi)型進(jìn)行淺拷貝
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}};? 基本類(lèi)型深拷貝歧匈,引用類(lèi)型進(jìn)行淺拷貝
console.log(arr2);? // {a:1, b: {c: 1}};??基本類(lèi)型深拷貝,引用類(lèi)型進(jìn)行淺拷貝
slice() 和 concat()
對(duì)基本類(lèi)型進(jìn)行深拷貝,對(duì)引用類(lèi)型進(jìn)行淺拷貝编检,這兩個(gè)方法僅適用于對(duì)不包含引用對(duì)象的一維數(shù)組的深拷貝
var arr1 = [1,2,3];
var arr2 = arr1.slice(0);? // 或者 var arr2 = arr1.concat();
arr2[0] = -1;
console.log(arr1); // [1, 2, 3]? ?? 基本類(lèi)型深拷貝,引用類(lèi)型進(jìn)行淺拷貝
console.log(arr2);? // [-1, 2, 3]? ? 基本類(lèi)型深拷貝,引用類(lèi)型進(jìn)行淺拷貝
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}];? ? 基本類(lèi)型深拷貝,引用類(lèi)型進(jìn)行淺拷貝
console.log(arr22);? //? [{a: 2}, {b: 2}];? ?? 基本類(lèi)型深拷貝鲤嫡,引用類(lèi)型進(jìn)行淺拷貝
JSON.parse(JSON.stringfy)
實(shí)現(xiàn)深拷貝原理:堆棧開(kāi)辟新內(nèi)存空間,實(shí)現(xiàn)深拷貝
var targetObj = JSON.parse(JSON.stringify(obj))? ? ?// 就是深拷貝
缺陷:
如果你的對(duì)象里有函數(shù)绑莺,函數(shù)無(wú)法被拷貝下來(lái)
無(wú)法拷貝copyObj對(duì)象原型鏈上的屬性和方法
實(shí)際場(chǎng)景可能對(duì)象里并沒(méi)有函數(shù)暖眼,原型鏈上并沒(méi)有屬性和方法,大多數(shù)場(chǎng)景可以直接上JSON.parse(JSON.stringify(obj))
遞歸
缺陷:
爆棧纺裁,數(shù)據(jù)的層次很深诫肠,遞歸就會(huì)棧溢出? ?https://zhuanlan.zhihu.com/p/73411916
循環(huán)引用
// 循環(huán)引用
var a = {};
a.a = a;
clone(a) // Maximum call stack size exceeded 直接死循環(huán)
第三方庫(kù)
lodash的cloneDeep
本質(zhì)是遞歸拷貝,對(duì)于數(shù)組或者對(duì)象中的屬性欺缘,又會(huì)進(jìn)行一個(gè)遞歸判斷栋豫,如果該屬性(數(shù)組便是index)的value是一個(gè)number,string,執(zhí)行結(jié)束谚殊,交出執(zhí)行權(quán)笼才。如果是數(shù)組或者對(duì)象,又會(huì)繼續(xù)執(zhí)行遞歸
https://blog.csdn.net/weixin_34049948/article/details/88772727
immutable.js的深拷貝
其內(nèi)部使用了?Trie(字典樹(shù))?數(shù)據(jù)結(jié)構(gòu),?Immutable.js?會(huì)把對(duì)象所有的 key 進(jìn)行 hash 映射络凿,將得到的 hash 值轉(zhuǎn)化為二進(jìn)制骡送,從后向前每 5 位進(jìn)行分割后再轉(zhuǎn)化為 Trie 樹(shù)。處理大量數(shù)據(jù)的情況下和直接深拷貝相比效率高了不少絮记。
https://blog.csdn.net/weixin_33965305/article/details/87958945
proxy和immer的深拷貝
通過(guò)攔截?set?和?get?就能達(dá)到我們想要的摔踱,當(dāng)然?Object.defineProperty()?也可以。其實(shí)immer這個(gè)庫(kù)就是用了這種做法來(lái)生成不可變對(duì)象的怨愤。其原理是建立一個(gè)new Map()派敷,判斷傳入的參數(shù)是否被修改過(guò)。沒(méi)有修改過(guò)的話就直接返回原數(shù)據(jù)并且停止這個(gè)分支的遍歷撰洗,如果修改過(guò)的話就從copy中取值篮愉,然后把整個(gè)copy中的屬性都執(zhí)行一遍 finalize 函數(shù)。
http://www.javanx.cn/20191217/js-deep-copy/