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()) 深拷贝内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Ajax+Json 级联菜单实现代码

    Ajax+Json 级联菜单实现代码

    Ajax+Json 级联菜单实现代码,需要的朋友可以参考下。
    2009-10-10
  • json-lib出现There is a cycle in the hierarchy解决办法

    json-lib出现There is a cycle in the hierarchy解决办法

    如果需要解析的数据间存在级联关系,而互相嵌套引用,在hibernate中极容易嵌套而抛出net.sf.json.JSONException: There is a cycle in the hierarchy异常。
    2010-02-02
  • JSON 入门指南 想了解json的朋友可以看下

    JSON 入门指南 想了解json的朋友可以看下

    JSON 即 JavaScript Object Natation,它是一种轻量级的数据交换格式,非常适合于服务器与 JavaScript 的交互。本文将快速讲解 JSON 格式,并通过代码示例演示如何分别在客户端和服务器端进行 JSON 格式数据的处理。
    2009-08-08
  • 简明json介绍

    简明json介绍

    不要认为JSON是种新的应用 ,其实JSON就是javascript支持的一种对象直接量。
    2008-09-09
  • JSON 数据格式介绍

    JSON 数据格式介绍

    这篇文章讲的比较深入,所以不用我画蛇添足了,只是下面这段代码很好的演示了JSON如何处理字符串数据
    2012-01-01
  • json编写简单一例

    json编写简单一例

    主要是了解一下json的简单写法与应用,方便想学习json的朋友
    2008-08-08
  • JSON.stringify 语法实例讲解

    JSON.stringify 语法实例讲解

    可能有些人对系列化这个词过敏,我的理解很简单。就是说把原来是对象的类型转换成字符串类型(或者更确切的说是json类型的)。就这么简单。打个比方说,你有一个类,那么你可以通过这个方法转换成相应的json类型的
    2012-03-03
  • javascript操作JSON的要领总结

    javascript操作JSON的要领总结

    JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包,需要的朋友可以了解下
    2012-12-12
  • 改进版通过Json对象实现深复制的方法

    改进版通过Json对象实现深复制的方法

    改进版通过Json对象实现深复制的方法,需要的朋友可以参考下
    2012-10-10
  • 写给小白学习的地理信息的表示法GeoJSON

    写给小白学习的地理信息的表示法GeoJSON

    这篇文章主要为大家介绍了写给小白学习的地理信息的表示法GeoJSON的详细实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05

最新评论