脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → json → JSON.parse(JSON.stringify()) 深拷贝

JS中JSON.parse(JSON.stringify())实现深拷贝

 更新时间：2023年08月01日 10:36:00   作者：雪球玩转前端.  
深拷贝就是完全拷贝一份新的对象,本文主要介绍了JS中JSON.parse(JSON.stringify())实现深拷贝,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

如何实现一个深拷贝

深拷贝就是完全拷贝一份新的对象，会在堆内存中开辟新的空间，拷贝的对象被修改后，被拷贝的原对象不会产生任何变化。主要针对的是引用数据类型.

实现深拷贝的方法

1.扩展运算符（...）

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

3.利用递归函数实现

今天先介绍JSON.parse(JSON.stringify())深拷贝，利用JSON.parse(JSON.stringify())实现深拷贝的方法具体可以转至JSON介绍，但是此方法也存在一些问题，接下来我分点说明。

1.该方法不会拷贝内部函数function()和undefined

当原对象中有这两个时，拷贝后这两种类型的数据直接丢失

 var num={
           name:"小姜",
           age:"18",
           gender:undefined,
           function(){
                      console.log("这是一个函数");
                     }
          }
        var numCopy=JSON.parse(JSON.stringify(num))
        console.log("原对象")
        console.log(num)
        console.log("拷贝后的对象")
        console.log(numCopy)

控制台输出：

从控制台结果可以看出undefined和函数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())

从控制台结果可以看出上面几个关于时间的几个内置方法无法使用了。

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时，拷贝后会使他们统一变成null.

4.无法处理循环引用

如果原始对象中存在循环引用，即对象的某个属性引用了该对象本身，使用该方法就会抛出异常。

 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)

控制台输出：

由控制台看出得到的新对象属性丢失。

总结来说，JSON.parse(JSON.stringify())实现深拷贝比较简单，但是同时也存在许多缺点。我们可以使用利用递归函数实现进行深拷贝。

到此这篇关于JS中JSON.parse(JSON.stringify())实现深拷贝的文章就介绍到这了,更多相关JSON.parse(JSON.stringify()) 深拷贝内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论