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

您可能感兴趣的文章:

JS对象与JSON格式数据相互转换
最近遇到这个问题，JS对象和JSON格式数据的相互转换。其实，也就是两个问题：JS对象转换成为JSON格式数据、JSON格式数据转换成为JS对象
2012-02-02
JavaScript 解析Json字符串的性能比较分析代码
我们在使用AJAX来做服务器端和客户端交互的时候，一般的做法是让服务器端返回一段JSON字符串，然后在客户端把它解析成JavaScript对象。
2009-12-12
JSON.stringify 语法实例讲解
可能有些人对系列化这个词过敏，我的理解很简单。就是说把原来是对象的类型转换成字符串类型（或者更确切的说是json类型的）。就这么简单。打个比方说，你有一个类，那么你可以通过这个方法转换成相应的json类型的
2012-03-03
ASP Json Parser修正版
之前因为要用json，在网上，json Generator就不少，但是，parser鲜有后来，在一个老外的启发下，写了一个praser，其实超简单，就是利用了JS的eval来parse，然后，把对象再返回给vbscript代码。
2009-12-12
详解JSON1：使用TSQL查询数据和更新JSON数据
这篇文章主要介绍了使用TSQL查询数据和更新JSON数据,具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2016-11-11
把普通对象转换成json格式的对象的简单实例
下面小编就为大家带来一篇把普通对象转换成json格式的对象的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07
JSON字符串和对象之间的转换详解
这篇文章主要介绍了JSON字符串和对象之间的转换详解,需要的朋友可以参考下
2015-05-05
JSON 入门教程基础篇 json入门学习笔记
刚开始接触json的时候感觉有点奇怪的命名，后来使用才发现这么简单而且用好用，扩展性很强，这里就为大家整理一下
2020-09-09
改进版通过Json对象实现深复制的方法
改进版通过Json对象实现深复制的方法，需要的朋友可以参考下
2012-10-10
如何实现json数据可视化详解
最近在工作中开发一个内部功能时碰到的一个需求，要把json数据在页面上展示出来，平时浏览器会安装jsonView这样的扩展来看json数据，但是程序要用到的话该怎么办呢？今天在网上搜索的时候，发现了这个小技巧，分享给大家，有需要的朋友们可以参考借鉴，下面来一起看看吧
2016-11-11