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