JavaScript-深拷貝娘香、淺拷貝

本文檔適用于有一定經(jīng)驗(yàn)的開(kāi)發(fā)者锉屈。我們默認(rèn)你已經(jīng)掌握了指針的概念(也可稱為地址) 荤傲,如果你是新手,你可能需要先了解 指針的概念

我們?cè)贘S中經(jīng)常需要復(fù)制一個(gè)對(duì)象或數(shù)組颈渊。
當(dāng)我們直接使用=賦值時(shí)遂黍,我們實(shí)際只賦值了這個(gè)對(duì)象的指針。這種情況 連拷貝都算不上俊嗽。
例:如下我們給array2賦值雾家,實(shí)際是賦值給array2一個(gè)指針,指針指向array1指向的數(shù)組绍豁。因此我們編輯 array2 時(shí)芯咧,array1也會(huì)變。

let array1 = [1,2,3]
let array2 = array1
array2[0] = 100
/*
 array1
>(3) [100, 2, 3]
array2
(3) [100, 2, 3]
*/

淺拷貝可以將數(shù)組(對(duì)象)的第一層拷貝下來(lái)竹揍。
ES6給我們提供了兩個(gè)方便的淺拷貝方法:
Array.from()Object.assign()
例:下面我們通過(guò)Array.from()對(duì)array3進(jìn)行淺拷貝唬党。我們可以看出,當(dāng)我們修改array4的普通元素時(shí)鬼佣,array3已經(jīng)不會(huì)隨著改變了驶拱。但是淺拷貝只是拷貝了第一層的元素,如果第一層元素含有對(duì)象(數(shù)組)晶衷,我們只拷貝一個(gè)指針(地址)蓝纲。array4通過(guò)這個(gè)指針(地址)訪問(wèn)的對(duì)象將是與array3是相同的。

let array3 = [1,2,3,{a:1,b:2,c:3}]
let array4 = Array.from(array3)
array4[0] = 100
array4[3].a = 100
/*
array3
>(4) [1, 2, 3, {a: 100, b: 2, c: 3}]
array4
>(4) [100, 2, 3, {a: 100, b: 2, c: 3}]
*/

目前JS常見(jiàn)的深拷貝有兩種方式晌纫。第一種種是兩次JSON化:
let array6 = JSON.parse(JSON.stringfiy(array5))
這種方法很簡(jiǎn)單税迷,但是當(dāng)元素含有undefined正則表達(dá)式時(shí)函數(shù)會(huì)拋出異常。
第二種深拷貝是逐層遍歷逐一賦值的方法锹漱,要麻煩一些箭养,但是沒(méi)有第一種的缺點(diǎn)。
目前哥牍,這兩種以外的拷貝方式都是淺拷貝毕泌。例如for...of遍歷中的item實(shí)際是對(duì)對(duì)象元素的淺拷貝。

// 例:逐層遍歷逐一賦值的深拷貝工具類
class deepCopy {
    static toRawType(value) {
        return Object.prototype.toString.call(value).slice(8, -1);
    }
    /* 已整合在tools中 */
    static copy(obj) {
        let emptyObject = null;
        if (this.toRawType(obj) == 'Object') {
            emptyObject = {};
        }
        else if (this.toRawType(obj) == 'Array') {
            emptyObject = [];
        }
        else {
            return obj;
        }
        for (let key in obj) {
            if (typeof obj[key] != 'object' || obj[key] == null) {
                emptyObject[key] = obj[key];
            }
            else {
                emptyObject[key] = this.copy(obj[key]);
            }
        }
        return emptyObject;
    }
}
let array5 = [1,2,3,{a:1,b:2,c:3}]
let array6  = deepCopy.copy(array5)
array6[3].a = 100
/*
array3
>(4) [1, 2, 3, {a: 1, b: 2, c: 3}]
array4
>(4) [1, 2, 3, {a: 100, b: 2, c: 3}]
*/
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末嗅辣,一起剝皮案震驚了整個(gè)濱河市撼泛,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌澡谭,老刑警劉巖愿题,帶你破解...
    沈念sama閱讀 216,692評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡潘酗,警方通過(guò)查閱死者的電腦和手機(jī)杆兵,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,482評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)仔夺,“玉大人拧咳,你說(shuō)我怎么就攤上這事∏糇疲” “怎么了骆膝?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,995評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)灶体。 經(jīng)常有香客問(wèn)我阅签,道長(zhǎng),這世上最難降的妖魔是什么蝎抽? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,223評(píng)論 1 292
  • 正文 為了忘掉前任政钟,我火速辦了婚禮,結(jié)果婚禮上樟结,老公的妹妹穿的比我還像新娘养交。我一直安慰自己,他們只是感情好瓢宦,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,245評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布碎连。 她就那樣靜靜地躺著,像睡著了一般驮履。 火紅的嫁衣襯著肌膚如雪鱼辙。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,208評(píng)論 1 299
  • 那天玫镐,我揣著相機(jī)與錄音倒戏,去河邊找鬼。 笑死恐似,一個(gè)胖子當(dāng)著我的面吹牛杜跷,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播矫夷,決...
    沈念sama閱讀 40,091評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼葛闷,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了口四?” 一聲冷哼從身側(cè)響起孵运,我...
    開(kāi)封第一講書(shū)人閱讀 38,929評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤秦陋,失蹤者是張志新(化名)和其女友劉穎蔓彩,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,346評(píng)論 1 311
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡赤嚼,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,570評(píng)論 2 333
  • 正文 我和宋清朗相戀三年旷赖,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片更卒。...
    茶點(diǎn)故事閱讀 39,739評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡等孵,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出蹂空,到底是詐尸還是另有隱情俯萌,我是刑警寧澤,帶...
    沈念sama閱讀 35,437評(píng)論 5 344
  • 正文 年R本政府宣布上枕,位于F島的核電站咐熙,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏辨萍。R本人自食惡果不足惜棋恼,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,037評(píng)論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望锈玉。 院中可真熱鬧爪飘,春花似錦、人聲如沸拉背。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,677評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)椅棺。三九已至抡诞,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間土陪,已是汗流浹背昼汗。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,833評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留鬼雀,地道東北人顷窒。 一個(gè)月前我還...
    沈念sama閱讀 47,760評(píng)論 2 369
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像源哩,于是被迫代替她去往敵國(guó)和親鞋吉。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,647評(píng)論 2 354