摘要:相信人很多學(xué)習(xí)的過(guò)程中都踩了深拷貝和淺拷貝的坑,深拷貝和淺拷貝的區(qū)別我就不再贅述了,今天我來(lái)寫(xiě)一下我自己實(shí)現(xiàn)深拷貝的各種方法。中的深拷貝也是用類似方法實(shí)現(xiàn)。
相信人很多學(xué)習(xí)js的過(guò)程中都踩了深拷貝和淺拷貝的坑,深拷貝和淺拷貝的區(qū)別我就不再贅述了,今天我來(lái)寫(xiě)一下我自己實(shí)現(xiàn)深拷貝的各種方法。
比較簡(jiǎn)單的拷貝方式可以借用瀏覽器的Json對(duì)象去實(shí)現(xiàn),先把對(duì)象轉(zhuǎn)化為json字符串,在解析回對(duì)象實(shí)現(xiàn)深拷貝。具體代碼就是JSON.parse(JSON.stringify(target));但是這種比較hack的方法總歸不是正途,現(xiàn)在我就來(lái)貼兩種我自己寫(xiě)的深拷貝代碼。
</>復(fù)制代碼
function deepClone(currobj){
if(typeof currobj !== "object"){
return currobj;
}
if(currobj instanceof Array){
var newobj = [];
}else{
var newobj = {}
}
for(var key in currobj){
if(typeof currobj[key] !== "object"){
newobj[key] = currobj[key];
}else{
newobj[key] = deepClone(currobj[key])
}
}
return newobj
}
第一種自然就是遞歸,遍歷對(duì)象的每一個(gè)屬性然后賦值到新對(duì)象了,若是有深層次嵌套的對(duì)象,遞歸執(zhí)行函數(shù)。jq中的深拷貝也是用類似方法實(shí)現(xiàn)。
</>復(fù)制代碼
function deepClone(currobj){
if(typeof currobj !== "object"){
return currobj;
}
if(currobj instanceof Array){
var newobj = [];
}else{
var newobj = {}
}
var currQue = [currobj], newQue = [newobj];
while(currQue.length){
var obj1 = currQue.shift(),obj2 = newQue.shift();
for(var key in obj1){
if(typeof obj1[key] !== "object"){
obj2[key] = obj1[key];
}else{
if(obj1[key] instanceof Array ){
obj2[key] = [];
}else{
obj2[key] = {}
};
currQue.push(obj1[key]);
newQue.push(obj2[key]);
}
}
}
return newobj;
};
上一種遞歸的方式容易引起內(nèi)存溢出,特別是對(duì)一個(gè)比較復(fù)雜,層級(jí)很深的對(duì)象進(jìn)行深拷貝。所以第二種方法是用循環(huán)去拷貝次級(jí)的對(duì)象,用兩個(gè)隊(duì)列去保存需要拷貝的對(duì)象和拷貝目標(biāo),利用淺拷貝的原理實(shí)現(xiàn)了深拷貝。
</>復(fù)制代碼
但是有時(shí)候?qū)ο髸?huì)存在子屬性指向自身的問(wèn)題,形成對(duì)象環(huán),我這暫時(shí)還沒(méi)有考慮到。
突然看到自己這篇文章,其實(shí)對(duì)象環(huán)的問(wèn)題只需要?jiǎng)e將舊數(shù)組出棧就行了具體代碼:
</>復(fù)制代碼
function deepClone(currobj){
if(typeof currobj !== "object"){
return currobj;
}
if(currobj instanceof Array){
var newobj = [];
}else{
var newobj = {}
}
var currQue = [currobj], newQue = [newobj], i = 0;
while(i <= currQue.length - 1){
var obj1 = currQue[i++],obj2 = newQue.shift();
for(var key in obj1){
if(typeof obj1[key] !== "object"){
obj2[key] = obj1[key];
}else{
if(currQue.includes(obj1[key])){
obj2[key] = obj1[key];
continue;
}
if(obj1[key] instanceof Array ){
obj2[key] = [];
}else{
obj2[key] = {}
};
currQue.push(obj1[key]);
newQue.push(obj2[key]);
}
}
}
return newobj;
};
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/81270.html
摘要:深拷貝和淺拷貝問(wèn)題的本質(zhì)還是不同數(shù)據(jù)類型的存儲(chǔ)方式差異,尤其是引用數(shù)據(jù)類型的特殊。 深拷貝和淺拷貝問(wèn)題的本質(zhì)還是不同數(shù)據(jù)類型的存儲(chǔ)方式差異,尤其是引用數(shù)據(jù)類型的特殊。showImg(https://segmentfault.com/img/bVbb8XH?w=1058&h=409); 現(xiàn)分別對(duì)賦值、淺拷貝、深拷貝做深入研究: 1.賦值 原理:直接將對(duì)象指針直接賦值給另一個(gè)變量 代碼: ...
摘要:地址傳遞引用類型則是地址傳遞,將存放在棧內(nèi)存中的地址賦值給接收的變量。即對(duì)象的淺拷貝會(huì)對(duì)主對(duì)象進(jìn)行拷貝,但不會(huì)復(fù)制主對(duì)象里面的對(duì)象。 相關(guān)知識(shí)點(diǎn) 1.javascript變量包含兩種不同數(shù)據(jù)類型的值:基本類型和引用類型。 基本類型值指的是簡(jiǎn)單的數(shù)據(jù)段,包括es6里面新增的一共是有6種,具體如下:number、string、boolean、null、undefined、symbol。 引...
摘要:而堆內(nèi)存主要負(fù)責(zé)像對(duì)象這種變量類型的存儲(chǔ),如下圖引用類型中復(fù)制淺拷貝的只是棧內(nèi)存中的指針,指向同一個(gè)堆內(nèi)存的對(duì)象如何實(shí)現(xiàn)深拷貝最簡(jiǎn)單的方法就是與方法 淺拷貝只會(huì)在引用類型中出現(xiàn) 基本數(shù)據(jù)類型有哪些,number,string,boolean,null,undefined,symbol以及未來(lái)ES10新增的BigInt(任意精度整數(shù))七類。 引用數(shù)據(jù)類型(Object類)有常規(guī)名值對(duì)的無(wú)...
摘要:當(dāng)多個(gè)事件觸發(fā)的時(shí)候,會(huì)把異步事件依次的放入里等同步事件執(zhí)行完之后,再去隊(duì)列里一個(gè)個(gè)執(zhí)行拾遺常用方法總結(jié)面試的信心來(lái)源于過(guò)硬的基礎(chǔ)參考高級(jí)程序設(shè)計(jì)你所不知道的深入淺出知識(shí)點(diǎn)思維導(dǎo)圖經(jīng)典實(shí)例總結(jié)那些剪不斷理還亂的關(guān)系 持續(xù)不斷更新。。。 基本類型和引用類型 vue props | Primitive vs Reference Types 基本類型和字面值之間的區(qū)別 基本類型和字面值相等,...
摘要:原文在這篇文章中我們將會(huì)討論中對(duì)象拷貝的多種方式。因此,根據(jù)你的用法需要特別注意的對(duì)象拷貝。在擁有權(quán)限的情況下,通知立即關(guān)閉。在中深拷貝不幸的是,結(jié)構(gòu)化拷貝算法目前僅適用于基于瀏覽器的應(yīng)用。 原文:COPYING OBJECTS IN JAVASCRIPT在這篇文章中我們將會(huì)討論 Javascript 中對(duì)象拷貝的多種方式。包括深拷貝和淺拷貝。開(kāi)始之前,先談一些基礎(chǔ)知識(shí): Javasc...
閱讀 2611·2023-04-25 15:07
閱讀 716·2021-11-24 10:21
閱讀 2321·2021-09-22 10:02
閱讀 3527·2019-08-30 15:43
閱讀 3240·2019-08-30 13:03
閱讀 2300·2019-08-29 17:18
閱讀 3597·2019-08-29 17:07
閱讀 1885·2019-08-29 12:27