javascript中賦值疫衩、淺拷貝、深拷貝的區(qū)別及實(shí)例詳解

賦值

當(dāng)把一個對象a賦值給另外一個對象b時荣德,賦的值是對象a在棧中的地址闷煤,而不是堆中的數(shù)據(jù)。

let a={
    name:'xiaoming',
    age:21,
    grade:{
        language:60,
        math:81,
        english:99,
        science:94
    },
}
let b=a
b.name='xiaowang'
b.grade.language=90
console.log('a',a)
console.log('b',b)
賦值.png

結(jié)果分析:對象b和對象a指向同一地址涮瞻,無論哪個對象發(fā)生改變鲤拿,另外一個對象都會聯(lián)動變化.

淺拷貝

淺拷貝它會創(chuàng)建一個新對象,不會指向同一個地址饲宛,只會賦值制對象的非對象屬性
(如果屬性是基本類型,拷貝的就是基本類型的值嗜价;如果屬性是內(nèi)存地址(引用類型)艇抠,拷貝的就是內(nèi)存地址)

ES6中有個淺拷貝的方法Object.assign(target, ...sources)。
let a = {
    name: '小明', 
    age: 21,
    grade: {
        language: 78,
        math: 81,
        english: 99,
        science: 94
    },
}
let b = {}
Object.assign(b,a)
b.name = '小花' 
b.grade.english = 9 
console.log('a', a)
console.log('b', b)
淺拷貝.png

結(jié)果分析:
b對象改變 name的值和grade對象久锥,a對象只有g(shù)rade對象的值發(fā)生改變家淤,name未受影響。
因?yàn)樯桑琻ame是基本類型絮重,b改變自身值,a 不會改變歹苦;而grade是一個對象青伤,為引用類型,b拷貝的是該對象的地址殴瘦,與a指向同一個地址狠角,所以b改變grade對象的值時,a也發(fā)生變化蚪腋。

深拷貝

深拷貝會另外拷貝一份一個一模一樣的對象,但是不同的是會從堆內(nèi)存中開辟一個新的區(qū)域存放新對象,新對象跟原對象不再共享內(nèi)存丰歌,修改賦值后的對象b不會改到原對象a。

實(shí)現(xiàn)方式

1屉凯、JSON.parse(JSON.stringify())

原理

用JSON.stringify將JSON對象轉(zhuǎn)成JSON字符串立帖,
再用JSON.parse()把字符串解析成對象,一去一來悠砚,新的對象產(chǎn)生了晓勇,而且對象會開辟新的棧,實(shí)現(xiàn)深拷貝。

缺點(diǎn)

由于用到了JSON.stringify()宵蕉,這也會導(dǎo)致一系列的問題酝静,因?yàn)橐獓?yán)格遵守JSON序列化規(guī)則:原對象中如果含有Date對象,JSON.stringify()會將其變?yōu)樽址勐辏蟛⒉粫⑵溥€原為日期對象别智。或是含有RegExp對象稼稿,JSON.stringify()會將其變?yōu)榭諏ο蟀邕叮瑢傩灾泻蠳aN、Infinity和-Infinity遇八,則序列化的結(jié)果會變成null复凳,如果屬性中有函數(shù),undefined,symbol則經(jīng)過JSON.stringify()序列化后的JSON字符串中這個鍵值對會消失,因?yàn)椴恢С帧?/p>

2谋右、手寫遞歸方法

遞歸方法實(shí)現(xiàn)深度克隆

/**
 * 深拷貝
 * @param {Object} obj 要拷貝對象
 */
function deepClone(obj = {}) {
    if (typeof obj !== 'object' || obj == null) {
        // 不是對象硬猫,或者是null
        return obj
    }
    //初始化返回結(jié)果
    let result
    if (obj instanceof Array) {
        result =[]
    }else{
        result = {}
    }
    for (const key in obj) {
        //保證key不是原型的屬性
        if (obj.hasOwnProperty(key)) { 
            //遞歸調(diào)用!改执!
            result[key] = deepClone(obj[key])
        }
    }
    //返回結(jié)果
    return result
}
深拷貝.png

結(jié)果分析:b對象改變 name的值和grade對象啸蜜,a均未受到影響,
以為b跟a不共享內(nèi)存地址辈挂,是從堆內(nèi)存中開辟一個新的區(qū)域存放的新對象衬横。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市终蒂,隨后出現(xiàn)的幾起案子蜂林,更是在濱河造成了極大的恐慌,老刑警劉巖拇泣,帶你破解...
    沈念sama閱讀 218,941評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件噪叙,死亡現(xiàn)場離奇詭異,居然都是意外死亡霉翔,警方通過查閱死者的電腦和手機(jī)构眯,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,397評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來早龟,“玉大人惫霸,你說我怎么就攤上這事〈械埽” “怎么了壹店?”我有些...
    開封第一講書人閱讀 165,345評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長芝加。 經(jīng)常有香客問我硅卢,道長射窒,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,851評論 1 295
  • 正文 為了忘掉前任将塑,我火速辦了婚禮脉顿,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘点寥。我一直安慰自己艾疟,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,868評論 6 392
  • 文/花漫 我一把揭開白布敢辩。 她就那樣靜靜地躺著蔽莱,像睡著了一般。 火紅的嫁衣襯著肌膚如雪戚长。 梳的紋絲不亂的頭發(fā)上盗冷,一...
    開封第一講書人閱讀 51,688評論 1 305
  • 那天,我揣著相機(jī)與錄音同廉,去河邊找鬼仪糖。 笑死,一個胖子當(dāng)著我的面吹牛迫肖,可吹牛的內(nèi)容都是我干的锅劝。 我是一名探鬼主播,決...
    沈念sama閱讀 40,414評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼咒程,長吁一口氣:“原來是場噩夢啊……” “哼鸠天!你這毒婦竟也來了讼育?” 一聲冷哼從身側(cè)響起帐姻,我...
    開封第一講書人閱讀 39,319評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎奶段,沒想到半個月后饥瓷,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,775評論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡痹籍,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年呢铆,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蹲缠。...
    茶點(diǎn)故事閱讀 40,096評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡棺克,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出线定,到底是詐尸還是另有隱情娜谊,我是刑警寧澤,帶...
    沈念sama閱讀 35,789評論 5 346
  • 正文 年R本政府宣布斤讥,位于F島的核電站纱皆,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜派草,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,437評論 3 331
  • 文/蒙蒙 一搀缠、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧近迁,春花似錦艺普、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,993評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至拓瞪,卻和暖如春缴罗,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背祭埂。 一陣腳步聲響...
    開封第一講書人閱讀 33,107評論 1 271
  • 我被黑心中介騙來泰國打工面氓, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人蛆橡。 一個月前我還...
    沈念sama閱讀 48,308評論 3 372
  • 正文 我出身青樓舌界,卻偏偏與公主長得像,于是被迫代替她去往敵國和親泰演。 傳聞我的和親對象是個殘疾皇子呻拌,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,037評論 2 355

推薦閱讀更多精彩內(nèi)容