时间类型变成字符串类型数据

当对象中有时间类型的元素时候-----时间类型会被变成字符串类型数据

const obj = {
    date:new Date()
}
typeof obj.date === 'object' //true
const objCopy = JSON.parse(JSON.stringify(obj));
typeof objCopy.date === string; //true

然后你就会惊讶的发现,getTime()调不了了,getYearFull()也调不了了。就所有时间类型的内置方法都调不动了。

但,string类型的内置方法全能调了。

undefined和function直接丢失

当对象中有undefined类型或function类型的数据时 --- undefined和function会直接丢失

    const obj = {
        undef: undefined,
        fun: () => { console.log('叽里呱啦,阿巴阿巴') }
    }
    console.log(obj,"obj");
    const objCopy = JSON.parse(JSON.stringify(obj));
    console.log(objCopy,"objCopy")

然后你就会发现,这两种类型的数据都没了。

变成null

当对象中有NaN、Infinity和-Infinity这三种值的时候 --- 会变成null

1.7976931348623157E 10308 是浮点数的最大上线 显示为Infinity

-1.7976931348623157E 10308 是浮点数的最小下线 显示为-Infinity

    const obj = {
        nan:NaN,
        infinityMax:1.7976931348623157E 10308,
        infinityMin:-1.7976931348623157E 10308,
    }
    console.log(obj, "obj");
    const objCopy = JSON.parse(JSON.stringify(obj));
    console.log(objCopy,"objCopy")

当对象循环引用的时候 --会报错

    const obj = {
        objChild:null
    }
    obj.objChild = obj;
    const objCopy = JSON.parse(JSON.stringify(obj));
    console.log(objCopy,"objCopy")

假如你有幸需要拷贝这么一个对象 ↓

const obj = {
    nan:NaN,
    infinityMax:1.7976931348623157E 10308,
    infinityMin:-1.7976931348623157E 10308,
    undef: undefined,
    fun: () => { console.log('叽里呱啦,阿巴阿巴') },
    date:new Date,
}

然后你就会发现,好家伙,没一个正常的。

你还在使用JSON.stringify()来实现深拷贝吗?

如果还在使用的话,小心了。作者推荐以后深拷贝使用递归的方式进行深拷贝。

javascript高级篇之实现深拷贝的四种方式 

这篇文章里面有封装好的可以进行深拷贝的递归函数,笔友可以自取。

总结

  • 对象中有时间类型的时候,序列化之后会变成字符串类型。
  • 对象中有undefined和Function类型数据的时候,序列化之后会直接丢失。
  • 对象中有NaN、Infinity和-Infinity的时候,序列化之后会显示null。
  • 对象循环引用的时候,会直接报错。
  • 最后,深拷贝建议使用递归,安全方便。

以上就是JSON.stringify实现深拷贝的巨坑详解的详细内容,更多关于JSON.stringify深拷贝的资料请关注Devmax其它相关文章!

前端使用JSON.stringify实现深拷贝的巨坑详解的更多相关文章

  1. 详解iOS的深浅拷贝

    本文详细介绍了IOS中的三种拷贝方式,对iOS的深浅拷贝有疑问的朋友们可以参考下本文。

  2. JSON.stringify的多种用法总结

    这篇文章主要给大家介绍了关于JSON.stringify使用的相关资料, JSON.stringify()方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串,需要的朋友可以参考下

  3. 详解JS变量存储深拷贝和浅拷贝

    这篇文章主要介绍了JS变量存储深拷贝和浅拷贝,想深入了解JS的同学,可以参考下

  4. Python详细讲解浅拷贝与深拷贝的使用

    这篇文章主要介绍了Python中的深拷贝和浅拷贝,通过讲解Python中的浅拷贝和深拷贝的概念和背后的原理展开全文,需要的小伙伴可以参考一下

  5. javascript深拷贝、浅拷贝和循环引用深入理解

    本文给大家详细讲述了javascript深拷贝、浅拷贝和循环引用的相关知识点,对此有兴趣需求的朋友学习下。

  6. 学习JSON.stringify的9大特性和转换规则

    本文介绍JSON.stringify9大特性和转换规则,JSON.stringify()方法将一个JavaScript对象或值转换为 JSON 字符串,如果指定了一个replacer 函数,则可以选择性地替换值,或者指定的replacer是数组,则可选择性地仅包含数组指定的属性,更多内容需要的小火煸可以参考下面温行内容

  7. 详细聊聊JS中不一样的深拷贝

    对于js中的对象的深拷贝在项目的开发中比较常用到,这篇文章主要给大家介绍了关于JS中不一样的深拷贝的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下

  8. Java中深拷贝,浅拷贝与引用拷贝的区别详解

    这篇文章主要为大家详细介绍了Java面试中常遇见的问题:深拷贝、浅拷贝与引用拷贝的区别,文中通过示例进行了详细讲解,需要的可以参考一下

  9. JavaScript深拷贝与浅拷贝原理深入探究

    深拷贝和浅拷贝是面试中经常出现的,主要考察对基本类型和引用类型的理解深度,这篇文章主要给大家介绍了关于js深拷贝和浅拷贝的相关资料,需要的朋友可以参考下

  10. 前端使用JSON.stringify实现深拷贝的巨坑详解

    这篇文章主要为大家介绍了JSON.stringify实现深拷贝的巨坑详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部