快捷導航

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

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

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

如何實現(xiàn)一個深拷貝

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

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

1.擴展運算符（...）

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

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

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

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

當原對象中有這兩個時，拷貝后這兩種類型的數(shù)據(jù)直接丟失

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

控制臺輸出：

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

2.時間元素

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

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

3.NAN，Infinity會變成null

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

控制臺輸出：

通過控制臺可以看到當對象中存在NaN,Infinity,-Infinity時，拷貝后會使他們統(tǒng)一變成null.

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

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

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

控制臺輸出：

在控制臺中可以看到此時使用該方法就會拋出TypeError異常.

5.對象的原型鏈上的屬性會丟失

如果原始對象的某個屬性是通過原型鏈接繼承的，那么使用該方法得到的新對象會丟失該屬性。

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

控制臺輸出：

由控制臺看出得到的新對象屬性丟失。

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

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

您可能感興趣的文章: