【js基礎】深淺拷貝的缺點

引用類型值的賦值淺拷貝

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/



參考鏈接:?http://www.itdecent.cn/p/bfe901f178f6

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內(nèi)容