2023-09-22

JS深拷貝詳解

1.這里實(shí)現(xiàn)了深拷貝是因?yàn)樵诨緮?shù)據(jù)類型String Number 都可以實(shí)現(xiàn)深拷貝因?yàn)樗挥幸粚?,且每次改變的變量的值都是改變整個(gè)變量這樣在堆中又開辟了一個(gè)內(nèi)存空間,沒(méi)有嵌套的情況下直接修改整個(gè)變量的方法在對(duì)象和方法中也適用

var a = 1
var b = a
a 打印結(jié)果為 1
b 打印結(jié)果為 1
a = 2
a 打印結(jié)果為 2
b 打印結(jié)果為 1

2.這里實(shí)現(xiàn)了深拷貝的原因與第1條是一樣的,因?yàn)楦某蒩變量整個(gè)值,所以在堆中又開辟了一個(gè)新空間

var a = [1,2,3]
var b = a
a 打印結(jié)果為 (3) [1, 2, 3]
b 打印結(jié)果為 (3) [1, 2, 3]
a = [3,2,1]
a 打印結(jié)果為 (3) [3, 2, 1]
b 打印結(jié)果為 (3) [1, 2, 3]

3.這里沒(méi)有實(shí)現(xiàn)深拷貝是因?yàn)?這里的a是引用數(shù)據(jù)類型萄唇,且修改a的值時(shí)改變的是下標(biāo)0的數(shù)據(jù),并沒(méi)有整個(gè)a變量全部修改术幔,所以并沒(méi)有開辟新的內(nèi)存空間另萤,導(dǎo)致a和b都指向了同一個(gè)堆,故而打印的結(jié)果是一樣的

var a = [1,2,3]
var b = a
a 打印結(jié)果為 (3) [1, 2, 3]
b 打印結(jié)果為 (3) [1, 2, 3]
a[0] = 2
a 打印結(jié)果為 (3) [2, 2, 3]
b 打印結(jié)果為 (3) [2, 2, 3]

4.這里實(shí)現(xiàn)了深拷貝是因?yàn)榻ob賦值的時(shí)候使用了擴(kuò)展運(yùn)算符诅挑,這樣就等于為b在堆里面新開了一個(gè)內(nèi)存空間四敞,故而實(shí)現(xiàn)了深拷貝

var b = [...a]
a 打印結(jié)果為 (3) [1, 2, 3]
b 打印結(jié)果為 (3) [1, 2, 3]
a[0] = 2
a 打印結(jié)果為 (3) [2, 2, 3]
b 打印結(jié)果為 (3) [1, 2, 3]

##5.這里使用了擴(kuò)展運(yùn)算符但是卻沒(méi)有像第4條那樣實(shí)現(xiàn)深拷貝,因?yàn)檫@里的a是二維數(shù)組拔妥,a和b下標(biāo)為3的數(shù)據(jù)來(lái)源于同一個(gè)堆忿危,故而打印結(jié)果為一樣
```var a = [1,2,3,[4,5]]
var b = [...a]
a 打印結(jié)果為 [0:1,1:2,2:3,3:[0:4,1:5]]
b 打印結(jié)果為 [0:1,1:2,2:3,3:[0:4,1:5]]
a[3][0] = 6
a 打印結(jié)果為 [0:1,1:2,2:3,3:[0:6,1:5]]
b 打印結(jié)果為 [0:1,1:2,2:3,3:[0:6,1:5]]

#根據(jù)以上結(jié)論我們得出結(jié)論:
1. 無(wú)論是不是使用了擴(kuò)展運(yùn)算符只要是直接修改了a變量整體數(shù)據(jù)那就不影響b,因?yàn)樽兞空w修改的話相當(dāng)于在堆里面新開辟了一個(gè)內(nèi)存
2. 擴(kuò)展運(yùn)算符支持深拷貝只建立在沒(méi)有嵌套數(shù)據(jù)的情況下毒嫡。

下面我們來(lái)說(shuō)遇到多層嵌套的情況下怎么進(jìn)行深拷貝
##1. 使用JSON.stringify轉(zhuǎn)換為JSON字符串 后使用JSON.parse解析為JS的對(duì)象或值
```var a = [1,2,3,[4,5]]
var b = JSON.parse(JSON.stringify(a))
a 打印結(jié)果為 [0:1,1:2,2:3,[0:4,1:5]]
b 打印結(jié)果為 [0:1,1:2,2:3,[0:4,1:5]]
a[3][1] = 11
a 打印結(jié)果為 [0:1,1:2,2:3,[0:4,1:11]]
b 打印結(jié)果為 [0:1,1:2,2:3,[0:4,1:5]]

##2.但是需要注意的是癌蚁,JSON.stringify無(wú)法深拷貝函數(shù)幻梯。如下代碼
```var a = {function(){console.log('hello')}}
a 打印結(jié)果為 {function: ?}
var b = JSON.parse(JSON.stringify(a))
b 打印結(jié)果為 {}

##3.這個(gè)時(shí)候我們就需要用到遞歸遍歷對(duì)象并手動(dòng)進(jìn)行拷貝  或者 Lodash的_.cloneDeep方法 兜畸。函數(shù)序列化并還原是相當(dāng)復(fù)雜的操作,并且有安全風(fēng)險(xiǎn)碘梢,因?yàn)檫€原的函數(shù)將在不受控制的上下文中執(zhí)行咬摇。應(yīng)謹(jǐn)慎使用和處理包含函數(shù)的序列化數(shù)據(jù)
```const _ = require('lodash');
const obj = { func: function() { console.log('Hello!'); } };
const clonedObj = _.cloneDeep(obj);
console.log(clonedObj);
// 輸出: { func: [Function: func] }
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市煞躬,隨后出現(xiàn)的幾起案子肛鹏,更是在濱河造成了極大的恐慌,老刑警劉巖恩沛,帶你破解...
    沈念sama閱讀 222,252評(píng)論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件在扰,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡雷客,警方通過(guò)查閱死者的電腦和手機(jī)芒珠,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,886評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)搅裙,“玉大人皱卓,你說(shuō)我怎么就攤上這事〔看” “怎么了娜汁?”我有些...
    開封第一講書人閱讀 168,814評(píng)論 0 361
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)兄朋。 經(jīng)常有香客問(wèn)我掐禁,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,869評(píng)論 1 299
  • 正文 為了忘掉前任傅事,我火速辦了婚禮宫盔,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘享完。我一直安慰自己灼芭,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,888評(píng)論 6 398
  • 文/花漫 我一把揭開白布般又。 她就那樣靜靜地躺著彼绷,像睡著了一般。 火紅的嫁衣襯著肌膚如雪茴迁。 梳的紋絲不亂的頭發(fā)上寄悯,一...
    開封第一講書人閱讀 52,475評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音堕义,去河邊找鬼猜旬。 笑死,一個(gè)胖子當(dāng)著我的面吹牛倦卖,可吹牛的內(nèi)容都是我干的洒擦。 我是一名探鬼主播,決...
    沈念sama閱讀 41,010評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼怕膛,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼熟嫩!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起褐捻,我...
    開封第一講書人閱讀 39,924評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤掸茅,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后柠逞,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體昧狮,經(jīng)...
    沈念sama閱讀 46,469評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,552評(píng)論 3 342
  • 正文 我和宋清朗相戀三年板壮,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了逗鸣。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,680評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡个束,死狀恐怖慕购,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情茬底,我是刑警寧澤沪悲,帶...
    沈念sama閱讀 36,362評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站阱表,受9級(jí)特大地震影響殿如,放射性物質(zhì)發(fā)生泄漏贡珊。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,037評(píng)論 3 335
  • 文/蒙蒙 一涉馁、第九天 我趴在偏房一處隱蔽的房頂上張望门岔。 院中可真熱鬧,春花似錦烤送、人聲如沸寒随。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,519評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)妻往。三九已至,卻和暖如春试和,著一層夾襖步出監(jiān)牢的瞬間讯泣,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,621評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工阅悍, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留好渠,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,099評(píng)論 3 378
  • 正文 我出身青樓节视,卻偏偏與公主長(zhǎng)得像拳锚,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子肴茄,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,691評(píng)論 2 361