快捷導(dǎo)航

JS中JSON.parse(JSON.stringify())實(shí)現(xiàn)深拷貝

更新時(shí)間：2023年08月01日 10:36:00 作者：雪球玩轉(zhuǎn)前端.

深拷貝就是完全拷貝一份新的對(duì)象,本文主要介紹了JS中JSON.parse(JSON.stringify())實(shí)現(xiàn)深拷貝,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

如何實(shí)現(xiàn)一個(gè)深拷貝
實(shí)現(xiàn)深拷貝的方法
1.該方法不會(huì)拷貝內(nèi)部函數(shù)function()和undefined
2.時(shí)間元素
3.NAN，Infinity會(huì)變成null
4.無(wú)法處理循環(huán)引用
5.對(duì)象的原型鏈上的屬性會(huì)丟失

如何實(shí)現(xiàn)一個(gè)深拷貝

深拷貝就是完全拷貝一份新的對(duì)象，會(huì)在堆內(nèi)存中開(kāi)辟新的空間，拷貝的對(duì)象被修改后，被拷貝的原對(duì)象不會(huì)產(chǎn)生任何變化。主要針對(duì)的是引用數(shù)據(jù)類型.

實(shí)現(xiàn)深拷貝的方法

1.擴(kuò)展運(yùn)算符（...）

2.JSON.parse(JSON.stringify())

3.利用遞歸函數(shù)實(shí)現(xiàn)

今天先介紹JSON.parse(JSON.stringify())深拷貝，利用JSON.parse(JSON.stringify())實(shí)現(xiàn)深拷貝的方法具體可以轉(zhuǎn)至JSON介紹，但是此方法也存在一些問(wèn)題，接下來(lái)我分點(diǎn)說(shuō)明。

1.該方法不會(huì)拷貝內(nèi)部函數(shù)function()和undefined

當(dāng)原對(duì)象中有這兩個(gè)時(shí)，拷貝后這兩種類型的數(shù)據(jù)直接丟失

 var num={
           name:"小姜",
           age:"18",
           gender:undefined,
           function(){
                      console.log("這是一個(gè)函數(shù)");
                     }
          }
        var numCopy=JSON.parse(JSON.stringify(num))
        console.log("原對(duì)象")
        console.log(num)
        console.log("拷貝后的對(duì)象")
        console.log(numCopy)

控制臺(tái)輸出：

從控制臺(tái)結(jié)果可以看出undefined和函數(shù)function在拷貝過(guò)程中丟失了。

2.時(shí)間元素

var time={
              Date:new Date()
       }
        var timeCopy=JSON.parse(JSON.stringify(time))
        console.log("原對(duì)象")
        console.log(time.Date.getFullYear()+"----"+time.Date.getTime()) 
        console.log() 
        console.log("拷貝后的對(duì)象")
        console.log(timeCopy.Date.getFullYear()+"----"+timeCopy.Date.getTime())

從控制臺(tái)結(jié)果可以看出上面幾個(gè)關(guān)于時(shí)間的幾個(gè)內(nèi)置方法無(wú)法使用了。

3.NAN，Infinity會(huì)變成null

 var num={
             one:NaN,
             two:Infinity,
             three:-Infinity,
         }
        var numCopy=JSON.parse(JSON.stringify(num))
        console.log("原對(duì)象")
        console.log(num) 
        console.log("拷貝后的對(duì)象")
        console.log(numCopy)

控制臺(tái)輸出：

通過(guò)控制臺(tái)可以看到當(dāng)對(duì)象中存在NaN,Infinity,-Infinity時(shí)，拷貝后會(huì)使他們統(tǒng)一變成null.

4.無(wú)法處理循環(huán)引用

如果原始對(duì)象中存在循環(huán)引用，即對(duì)象的某個(gè)屬性引用了該對(duì)象本身，使用該方法就會(huì)拋出異常。

 var num={
           a:"小姜",
           b:"小劉",
       }
       num.c=num  
       console.log("原對(duì)象")
       console.log(num) 
       console.log("拷貝后的對(duì)象")
       var numCopy=JSON.parse(JSON.stringify(num))
       console.log(numCopy)

控制臺(tái)輸出：

在控制臺(tái)中可以看到此時(shí)使用該方法就會(huì)拋出TypeError異常.

5.對(duì)象的原型鏈上的屬性會(huì)丟失

如果原始對(duì)象的某個(gè)屬性是通過(guò)原型鏈接繼承的，那么使用該方法得到的新對(duì)象會(huì)丟失該屬性。

 function People(){
             name:"小姜";
      }
      People.prototype.name="小劉";
      var People1=new People();
      var peopleCopy=JSON.parse(JSON.stringify(People1));
      console.log("原對(duì)象")
      console.log(People1.name)
      console.log("拷貝后對(duì)象")
      console.log(peopleCopy.name)

控制臺(tái)輸出：

由控制臺(tái)看出得到的新對(duì)象屬性丟失。

總結(jié)來(lái)說(shuō)，JSON.parse(JSON.stringify())實(shí)現(xiàn)深拷貝比較簡(jiǎn)單，但是同時(shí)也存在許多缺點(diǎn)。我們可以使用利用遞歸函數(shù)實(shí)現(xiàn)進(jìn)行深拷貝。

到此這篇關(guān)于JS中JSON.parse(JSON.stringify())實(shí)現(xiàn)深拷貝的文章就介紹到這了,更多相關(guān)JSON.parse(JSON.stringify()) 深拷貝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: