前端使用JSON.stringify實(shí)現(xiàn)深拷貝的巨坑詳解

更新時(shí)間：2022年07月06日 16:33:17 作者：工邊頁(yè)字

這篇文章主要為大家介紹了JSON.stringify實(shí)現(xiàn)深拷貝的巨坑詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jì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ù)，筆友可以自取。