2020-8-13 前端達(dá)人
了解拷貝背后的過程,避免不必要的錯誤,Js專題系列之深淺拷貝,我們一起加油~
當(dāng)我們在操作數(shù)據(jù)之前,可能會遇到這樣的情況:
當(dāng)我們遇到類似需要場景時,首先想到的就是拷貝它,殊不知拷貝也大有學(xué)問哦~
下面簡單的例子,你是否覺得熟悉?
大家都能想到,字符串是基本類型,它的值保存在棧中,在對它進(jìn)行拷貝時,其實(shí)是為新變量開辟了新的空間。 str
和newStr
就好比兩個一模一樣的房間,布局一致卻毫無關(guān)聯(lián)。
類似的代碼段,但這次我們使用數(shù)組這個引用類型舉例,你會發(fā)現(xiàn)修改賦值后的數(shù)據(jù),原始數(shù)據(jù)也跟著改變了,這顯然不滿足我們的需要。本篇文章就來聊一聊引用數(shù)據(jù)拷貝的學(xué)問。
如果大家對Js的數(shù)據(jù)類型存在著疑問,不妨看看《JavaScript中的基本數(shù)據(jù)類型》
拷貝的劃分都是針對引用類型來討論的,淺拷貝——顧名思義,淺拷貝就是“淺層拷貝”,實(shí)際上只做了表面功夫:
不發(fā)生事情(操作)還好,一旦對新數(shù)組進(jìn)行了操作,兩個變量中所保存的數(shù)據(jù)都會發(fā)生改變。
發(fā)生這類情況的原因也是因?yàn)?code style="box-sizing:border-box;outline:0px;margin:0px;padding:2px 4px;font-family:"font-size:14px;line-height:22px;color:#C7254E;background-color:#F9F2F4;border-radius:2px;overflow-wrap:break-word;">引用類型的基本特性:
數(shù)組中的slice和concat都會返回一個新數(shù)組,我們一起來試一下:
這個問題這么快就解決了?雖然對這一層數(shù)據(jù)進(jìn)行了這樣的的處理后,確實(shí)解決了問題,但!
果然事情沒有那么簡單,這也是因?yàn)閿?shù)據(jù)類型的不同。
S 不允許我們直接操作內(nèi)存中的地址,也就是說不能操作對象的內(nèi)存空間,所以,我們對對象的操作都只是在操作它的引用而已。
既然淺拷貝
達(dá)不到我們的要求,本著效率的原則,我們找找有沒有幫助我們實(shí)現(xiàn)深拷貝
的方法。
數(shù)據(jù)的方法失敗了,還有沒有其他辦法?我們需要實(shí)現(xiàn)真正意義上的拷貝出獨(dú)立的數(shù)據(jù)。
這里我們利用JSON的兩個方法,JSON.stringify()
,JSON.parse()
來實(shí)現(xiàn)最簡潔的深拷貝
這個方法應(yīng)該是實(shí)現(xiàn)深拷貝最簡潔的方法,但是,它仍然存在問題,我們先來看看剛才都做了些什么:
arr
JSON 字符串
值或?qū)ο?/code>
理解:
我們可以理解為,將原始數(shù)據(jù)轉(zhuǎn)換為新字符串
,再通過新字符串
還原為一個新對象
,這中改變數(shù)據(jù)類型的方式,間接的繞過了拷貝對象引用的過程,也就談不上影響原始數(shù)據(jù)。
限制:
這種方式成立的根本就是保證數(shù)據(jù)在“中轉(zhuǎn)”時的完整性,而JSON.stringify()
將值轉(zhuǎn)換為相應(yīng)的JSON格式
時也有缺陷:
-
undefined、任意的函數(shù)以及 symbol 值,在序列化過程中會被忽略(出現(xiàn)在非數(shù)組對象的屬性值中時)或者被轉(zhuǎn)換成 null(出現(xiàn)在數(shù)組中時)。
-
函數(shù)、undefined 被單獨(dú)轉(zhuǎn)換時,會返回 undefined,
-
如JSON.stringify(function(){})
-
JSON.stringify(undefined)
-
對包含循環(huán)引用的對象(對象之間相互引用,形成無限循環(huán))執(zhí)行此方法,會拋出錯誤。
-
NaN 和 Infinity 格式的數(shù)值及 null 都會被當(dāng)做 null。
-
其他類型的對象,包括 Map/Set/WeakMap/WeakSet,僅會序列化可枚舉的屬性。
所以當(dāng)我們拷貝函數(shù)、undefined等stringify
轉(zhuǎn)換有問題的數(shù)據(jù)時,就會出錯,我們在實(shí)際開發(fā)中也要結(jié)合實(shí)際情況使用。
舉一反三:
既然是通過改變數(shù)據(jù)類型來繞過拷貝引用這一過程,那么單純的數(shù)組深拷貝是不是可以通過現(xiàn)有的幾個API來實(shí)現(xiàn)呢?
-
注意,此時僅能對包含純數(shù)字的數(shù)組進(jìn)行深拷貝,因?yàn)椋?
-
toString無法正確的處理對象和函數(shù)
-
Number無法處理 false、undefined等數(shù)據(jù)類型
但我愿稱它為純數(shù)字?jǐn)?shù)組深拷貝!
3.2 Object.assign()
有的人會認(rèn)為Object.assign()
,可以做到深拷貝,我們來看一下
-
神奇,第一層屬性沒有改變,但第二層卻同步改變了,這是為什么呢?
因?yàn)?Object.assign()拷貝的是(可枚舉)屬性值。
假如源值是一個對象的引用,它僅僅會復(fù)制其引用值。MDN傳送門
四、自己實(shí)現(xiàn)深淺拷貝
既然現(xiàn)有的方法無法實(shí)現(xiàn)深拷貝,不妨我們自己來實(shí)現(xiàn)一個吧~
4.1 淺拷貝
我們只需要將所有屬性即其嵌套屬性原封不動的復(fù)制給新變量一份即可,拋開現(xiàn)有的方法,我們應(yīng)該怎么做呢?
-
我們只需要將所有屬性的引用拷貝一份即可~
4.2 深拷貝
相信大家在實(shí)現(xiàn)深拷貝的時候都會想到遞歸,同樣是判斷屬性值,但如果當(dāng)前類型為object
則證明需要繼續(xù)遞歸,直到最后
-
我們用白話來解釋一下deepCopy
都做了什么
-
讀取
obj
,創(chuàng)建 第一個newObj
-
判斷類型為
[]
-
key為
0
(for in
以任意順序遍歷,我們假定按正常循序遍歷)
-
判斷不是引用類型,直接復(fù)制
-
key為
1
-
判斷是引用類型
-
進(jìn)入遞歸,重新走了一遍剛才的流程,只不過讀取的是
obj[1]
另外請注意遞歸的方式雖然可以深拷貝,但是在性能上肯定不如淺拷貝,大家還是需要結(jié)合實(shí)際情況來選擇。
作者: 余光
分類
-
大數(shù)據(jù)可視化設(shè)計文章及欣賞(120)
-
B端ui設(shè)計文章及欣賞(569)
-
系統(tǒng)UI設(shè)計文章及欣賞(65)
-
移動端UI設(shè)計文章及欣賞(678)
-
圖標(biāo)設(shè)計文章及欣賞(113)
-
網(wǎng)站設(shè)計文章及欣賞(474)
-
平面設(shè)計(251)
-
行業(yè)趨勢(455)
-
設(shè)計資源(869)
-
交互設(shè)計及用戶體驗(yàn)(893)
-
前端及開發(fā)文章及欣賞(1031)
-
隨筆的一些文章(60)
-
設(shè)計思維(1864)
-
用戶研究(238)
-
設(shè)計管理與成長(329)
-
seo優(yōu)化(470)
日歷
鏈接
個人資料
藍(lán)藍(lán)設(shè)計的小編
http://m.wnxcall.com
存檔