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