前端使用JSON.stringify實(shí)現(xiàn)深拷貝的巨坑詳解
時(shí)間類型變成字符串類型數(shù)據(jù)
當(dāng)對(duì)象中有時(shí)間類型的元素時(shí)候-----時(shí)間類型會(huì)被變成字符串類型數(shù)據(jù)
const obj = { date:new Date() } typeof obj.date === 'object' //true const objCopy = JSON.parse(JSON.stringify(obj)); typeof objCopy.date === string; //true
然后你就會(huì)驚訝的發(fā)現(xiàn),getTime()調(diào)不了了,getYearFull()也調(diào)不了了。就所有時(shí)間類型的內(nèi)置方法都調(diào)不動(dòng)了。
但,string類型的內(nèi)置方法全能調(diào)了。
undefined和function直接丟失
當(dāng)對(duì)象中有undefined類型或function類型的數(shù)據(jù)時(shí) --- undefined和function會(huì)直接丟失
const obj = { undef: undefined, fun: () => { console.log('嘰里呱啦,阿巴阿巴') } } console.log(obj,"obj"); const objCopy = JSON.parse(JSON.stringify(obj)); console.log(objCopy,"objCopy")
然后你就會(huì)發(fā)現(xiàn),這兩種類型的數(shù)據(jù)都沒了。
變成null
當(dāng)對(duì)象中有NaN、Infinity和-Infinity這三種值的時(shí)候 --- 會(huì)變成null
1.7976931348623157E+10308 是浮點(diǎn)數(shù)的最大上線 顯示為Infinity
-1.7976931348623157E+10308 是浮點(diǎn)數(shù)的最小下線 顯示為-Infinity
const obj = { nan:NaN, infinityMax:1.7976931348623157E+10308, infinityMin:-1.7976931348623157E+10308, } console.log(obj, "obj"); const objCopy = JSON.parse(JSON.stringify(obj)); console.log(objCopy,"objCopy")
當(dāng)對(duì)象循環(huán)引用的時(shí)候 --會(huì)報(bào)錯(cuò)
const obj = { objChild:null } obj.objChild = obj; const objCopy = JSON.parse(JSON.stringify(obj)); console.log(objCopy,"objCopy")
假如你有幸需要拷貝這么一個(gè)對(duì)象 ↓
const obj = { nan:NaN, infinityMax:1.7976931348623157E+10308, infinityMin:-1.7976931348623157E+10308, undef: undefined, fun: () => { console.log('嘰里呱啦,阿巴阿巴') }, date:new Date, }
然后你就會(huì)發(fā)現(xiàn),好家伙,沒一個(gè)正常的。
你還在使用JSON.stringify()來實(shí)現(xiàn)深拷貝嗎?
如果還在使用的話,小心了。作者推薦以后深拷貝使用遞歸的方式進(jìn)行深拷貝。
javascript高級(jí)篇之實(shí)現(xiàn)深拷貝的四種方式
這篇文章里面有封裝好的可以進(jìn)行深拷貝的遞歸函數(shù),筆友可以自取。
總結(jié)
- 對(duì)象中有時(shí)間類型的時(shí)候,序列化之后會(huì)變成字符串類型。
- 對(duì)象中有undefined和Function類型數(shù)據(jù)的時(shí)候,序列化之后會(huì)直接丟失。
- 對(duì)象中有NaN、Infinity和-Infinity的時(shí)候,序列化之后會(huì)顯示null。
- 對(duì)象循環(huán)引用的時(shí)候,會(huì)直接報(bào)錯(cuò)。
- 最后,深拷貝建議使用遞歸,安全方便。
以上就是JSON.stringify實(shí)現(xiàn)深拷貝的巨坑詳解的詳細(xì)內(nèi)容,更多關(guān)于JSON.stringify深拷貝的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JavaScript駕馭網(wǎng)頁-獲取網(wǎng)頁元素
這篇文章主要介紹了JavaScript駕馭網(wǎng)頁-獲取網(wǎng)頁元素的相關(guān)資料,需要的朋友可以參考下2016-03-03如何制作浮動(dòng)廣告 JavaScript制作浮動(dòng)廣告代碼
如果有一定的JavaScript基礎(chǔ),制作浮動(dòng)廣告還是比較容易的,利用閑暇時(shí)間簡單制作了一個(gè),感興趣的朋友可以參考下哦2012-12-12javascript實(shí)現(xiàn)fetch請求返回的統(tǒng)一攔截
這篇文章主要介紹了javascript實(shí)現(xiàn)fetch請求返回的統(tǒng)一攔截,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12