前端使用JSON.stringify實現深拷貝的巨坑詳解

Posted on by

時間類型變成字符串類型數據

當對象中有時間類型的元素時候—–時間類型會被變成字符串類型數據

const obj = {
    date:new Date()
}
typeof obj.date === 'object' //true
const objCopy = JSON.parse(JSON.stringify(obj));
typeof objCopy.date === string; //true

然後你就會驚訝的發現，getTime()調不瞭瞭，getYearFull()也調不瞭瞭。就所有時間類型的內置方法都調不動瞭。

但，string類型的內置方法全能調瞭。

undefined和function直接丟失

當對象中有undefined類型或function類型的數據時 — undefined和function會直接丟失

    const obj = {
        undef: undefined,
        fun: () => { console.log('嘰裡呱啦，阿巴阿巴') }
    }
    console.log(obj,"obj");
    const objCopy = JSON.parse(JSON.stringify(obj));
    console.log(objCopy,"objCopy")

然後你就會發現，這兩種類型的數據都沒瞭。

變成null

當對象中有NaN、Infinity和-Infinity這三種值的時候 — 會變成null

1.7976931348623157E+10308 是浮點數的最大上線 顯示為Infinity

-1.7976931348623157E+10308 是浮點數的最小下線 顯示為-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")

當對象循環引用的時候 –會報錯

    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,
}

然後你就會發現，好傢夥，沒一個正常的。

你還在使用JSON.stringify()來實現深拷貝嗎？

如果還在使用的話，小心瞭。作者推薦以後深拷貝使用遞歸的方式進行深拷貝。

javascript高級篇之實現深拷貝的四種方式 

這篇文章裡面有封裝好的可以進行深拷貝的遞歸函數，筆友可以自取。

總結

  • 對象中有時間類型的時候，序列化之後會變成字符串類型。
  • 對象中有undefined和Function類型數據的時候，序列化之後會直接丟失。
  • 對象中有NaN、Infinity和-Infinity的時候，序列化之後會顯示null。
  • 對象循環引用的時候，會直接報錯。
  • 最後，深拷貝建議使用遞歸，安全方便。

以上就是JSON.stringify實現深拷貝的巨坑詳解的詳細內容，更多關於JSON.stringify深拷貝的資料請關註WalkonNet其它相關文章！

推薦閱讀：