摘要:好像栗子不是那么好吃,那我們來看看下面的解釋吧深淺拷貝深拷貝和淺拷貝只針對像這樣的引用類型數(shù)據(jù)。深拷貝則是開啟一個新的棧,兩個對象對應(yīng)兩個不同的引用地址,修改一個對象的屬性,不會改變另一個對象的屬性。
拷貝顧名思義就是復(fù)制,但是它并不簡單哦,拷貝分為深淺拷貝,那么啥是深拷貝啥是淺拷貝呢,讓我們來舉個栗子,淺拷貝就是當(dāng)你拷貝別人的U盤里東西時,卻沒有新建文件存放在自己的電腦里,直接在里面修改,那么我們就更改了U盤里的內(nèi)容,深拷貝就是在自己的電腦里新建了文件進行修改,而不會影響到原來的內(nèi)容。好像栗子不是那么好吃,那我們來看看下面的解釋吧!??!
深淺拷貝1.深拷貝和淺拷貝只針對像Object, Array這樣的引用類型數(shù)據(jù)。
2.淺拷貝是對對象引用地址進行拷貝,并沒有開辟新的棧,也就是拷貝后的結(jié)果是兩個對象指向同一個引用地址,修改其中一個對象的屬性,則另一個對象的屬性也會改變。
3.深拷貝則是開啟一個新的棧,兩個對象對應(yīng)兩個不同的引用地址,修改一個對象的屬性,不會改變另一個對象的屬性。
淺拷貝直接上栗子吧
var myInfo = {name:"liu",sex:"女"}; var newInfo = myInfo; console.log(myInfo); //{name:"liu",sex:"女"} newInfo.sex = "小仙女"; console.log(myInfo); //{name:"liu",sex:"小仙女"}
可以看到newInfo復(fù)制了myInfo里的內(nèi)容,本應(yīng)他們之間沒有聯(lián)系的,可是為什么當(dāng)newInfo更改時同時也影響了myInfo?那是因為這只是淺拷貝,newInfo的地址并沒有更改,指向同一個棧。
讓我們先對比一下下面的兩個栗子吧!
var array = [{a:1,b:2},{a:3,b:4}]; var newArray = Object.assign([],array); newArray.length = 1; console.log(newArray); console.log(array); newArray[0].a = 123; console.log(array[0]);
function deepClone(obj){ if(!obj&& typeof obj!== "object"){ return; } var newObj= obj.constructor === Array ? [] : {}; for(var key in obj){ if(obj[key]){ if(obj[key] && typeof obj[key] === "object"){ newObj[key] = obj[key].constructor === Array ? [] : {}; //遞歸 newObj[key] = deepClone(obj[key]); }else{ newObj[key] = obj[key]; } } } return newObj; } var array = [{a:1,b:2},{a:3,b:4}]; var newArray = deepClone(array); console.log(array[0]); newArray[0].a = 123; console.log(array[0]);
大家思考一下,這兩個栗子會是一樣嗎?
來公布一下正確答案:
先看第一個栗子
[{a:1,b:2},{a:3,b:4}]
{a: 123, b: 2}
(問號臉)我明明沒有更改myInfo的數(shù)據(jù)啊,這么回事?
因為Object.assign并不是深拷貝,是披著深拷貝外衣的淺拷貝。最多也是Object.assign會拷貝第一層的值,對于第一層的值都是深拷貝,而到第二層的時候就是復(fù)制引用。類似的情況還有,slice方法和concat方法等。
來看看第二個
{a:1,b:2}
{a:1,b:2}
兩個結(jié)果都是一樣的,為什么呢?
因為這才是深拷貝啊,newInfo開啟了一個新的棧,雖然內(nèi)容相同,可是他們已經(jīng)在不同地點了,互不影響。這里我們采用了封裝和遞歸,如果對象屬性的值是引用類型(Array,Object),那么對該屬性進行深拷貝,直到遍歷到屬性的值是基本類型為止。好像有點復(fù)雜誒,沒事,我們還有個簡單粗暴的方法?。?!
var newArray = JSON.parse(JSON.stringify(array)); console.log(array[0])//{a:1,b:2} newArray[0].a = 123 console.log(array[0])//{a:1,b:2}
利用JSON解析函數(shù)把對象轉(zhuǎn)成字符串,再把字符串轉(zhuǎn)成對象!四不四很簡單呀!?
這就是我對于深淺拷貝的了解了,如果有更好的見解要告訴我哦!?
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://www.ezyhdfw.cn/yun/89894.html
摘要:在之前的文章專題之?dāng)?shù)據(jù)類型和類型檢測中我有講過,中的數(shù)據(jù)類型分為兩種,基本數(shù)據(jù)類型和引用數(shù)據(jù)類型,基本數(shù)據(jù)類型是保存在棧的數(shù)據(jù)結(jié)構(gòu)中的是按值訪問,所以不存在深淺拷貝問題。 前言 在開發(fā)過程中,偶爾會遇到這種場景,拿到一個數(shù)據(jù)后,你打算對它進行處理,但是你又希望拷貝一份副本出來,方便數(shù)據(jù)對比和以后恢復(fù)數(shù)據(jù)。 那么這就涉及到了 JS 中對數(shù)據(jù)的深淺拷貝問題,所謂深淺拷貝,淺拷貝的意思就是,...
摘要:深拷貝相比于淺拷貝速度較慢并且花銷較大。所以在賦值完成后,在棧內(nèi)存就有兩個指針指向堆內(nèi)存同一個數(shù)據(jù)。結(jié)果如下擴展運算符只能對一層進行深拷貝如果拷貝的層數(shù)超過了一層的話,那么就會進行淺拷貝那么我們可以看到和展開原算符對于深淺拷貝的結(jié)果是一樣。 JS中數(shù)據(jù)類型 基本數(shù)據(jù)類型: undefined、null、Boolean、Number、String和Symbol(ES6) 引用數(shù)據(jù)類型:...
摘要:開門見山,有人叫對象的復(fù)制為深復(fù)制淺復(fù)制,也有人叫深拷貝淺拷貝。高級屬性修改深拷貝滿足對象的復(fù)制,淺拷貝影響原數(shù)組。關(guān)于對象的深淺拷貝,暫且探索到這里,后續(xù)有新發(fā)現(xiàn)再進行補充。 showImg(https://segmentfault.com/img/remote/1460000014305581); 開門見山,有人叫對象的復(fù)制為深復(fù)制淺復(fù)制,也有人叫深拷貝淺拷貝。其實都是copy。 ...
摘要:正文討論深淺拷貝,首先要從的基本數(shù)據(jù)類型說起根據(jù)中的變量類型傳遞方式,分為值類型和引用類型,值類型變量包括。當(dāng)你拷貝的對象有多級的時候,就是深拷貝。數(shù)據(jù)不存在則對其拷貝。 前言: 本文主要閱讀對象:對深淺拷貝印象模糊對初級前端,想對js深淺拷貝聊一聊的中級前端。 如果是對這些有完整對認(rèn)知體系和解決方法的大佬,可以選擇略過。 正文: 討論深淺拷貝,首先要從js的基本數(shù)據(jù)類型說起: 根據(jù) J...
閱讀 2336·2021-11-23 09:51
閱讀 1150·2021-11-22 15:35
閱讀 5405·2021-11-22 09:34
閱讀 1739·2021-10-08 10:13
閱讀 3080·2021-07-22 17:35
閱讀 2712·2019-08-30 15:56
閱讀 3153·2019-08-29 18:44
閱讀 3188·2019-08-29 15:32