千萬不要用JSON.stringify()去實(shí)現(xiàn)深拷貝！有巨坑??！

1.當(dāng)對象中有時間類型的元素時候
時間類型會被變成字符串類型數(shù)據(jù)
const obj = {
    date:new Date()
}
typeof obj.date === 'object' //true
const objCopy = JSON.parse(JSON.stringify(obj));
typeof objCopy.date === string; //true
然后你就會驚訝的發(fā)現(xiàn)，getTime()調(diào)不了了，getYearFull()也調(diào)不了了。就所有時間類型的內(nèi)置方法都調(diào)不動了。

但，string 類型的內(nèi)置方法全能調(diào)了。

2.當(dāng)對象中有 undefined 類型或 function 類型的數(shù)據(jù)時
undefined 和 function 會直接丟失
const obj = {
    undef: undefined,
    fun: () => { console.log('嘰里呱啦，阿巴阿巴') }
}
console.log(obj,"obj");
const objCopy = JSON.parse(JSON.stringify(obj));
console.log(objCopy,"objCopy")

然后你就會發(fā)現(xiàn)，這兩種類型的數(shù)據(jù)都沒了。
3.當(dāng)對象中有 NaN、Infinity 和-Infinity 這三種值的時候
會變成 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")

4.當(dāng)對象循環(huán)引用的時候
會報(bào)錯
const obj = {
    objChild:null
}
obj.objChild = obj;
const objCopy = JSON.parse(JSON.stringify(obj));
console.log(objCopy,"objCopy")

假如你有幸需要拷貝這么一個對象 ↓

const obj = {
    nan:NaN,
    infinityMax:1.7976931348623157E+10308,
    infinityMin:-1.7976931348623157E+10308,
    undef: undefined,
    fun: () => { console.log('嘰里呱啦，阿巴阿巴') },
    date:new Date,
}
然后你就會發(fā)現(xiàn)，好家伙，沒一個正常的。
你還在使用JSON.stringify()來實(shí)現(xiàn)深拷貝嗎？

總結(jié)
對象中有時間類型的時候，序列化之后會變成字符串類型。
對象中有undefined和Function類型數(shù)據(jù)的時候，序列化之后會直接丟失。
對象中有NaN、Infinity和-Infinity的時候，序列化之后會顯示 null。
對象循環(huán)引用的時候，會直接報(bào)錯。
最后，深拷貝建議使用遞歸，安全方便。

原文連接：https://juejin.cn/post/7113829141392130078 作者：工邊頁字




作者：工邊頁字


歡迎關(guān)注微信公眾號 ：前端開發(fā)愛好者


添加好友備注【進(jìn)階學(xué)習(xí)】拉你進(jìn)技術(shù)交流群