前端使用JSON.stringify实现深拷贝的巨坑详解
更新时间：2022年07月06日 16:33:17 作者：工边页字
这篇文章主要为大家介绍了JSON.stringify实现深拷贝的巨坑详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
时间类型变成字符串类型数据
当对象中有时间类型的元素时候-----时间类型会被变成字符串类型数据
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()来实现深拷贝吗？
如果还在使用的话，小心了。作者推荐以后深拷贝使用递归的方式进行深拷贝。
这篇文章里面有封装好的可以进行深拷贝的递归函数，笔友可以自取。
总结
- 对象中有时间类型的时候，序列化之后会变成字符串类型。
- 对象中有undefined和Function类型数据的时候，序列化之后会直接丢失。
- 对象中有NaN、Infinity和-Infinity的时候，序列化之后会显示null。
- 对象循环引用的时候，会直接报错。
- 最后，深拷贝建议使用递归，安全方便。
以上就是JSON.stringify实现深拷贝的巨坑详解的详细内容，更多关于JSON.stringify深拷贝的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了Webpack的dll功能使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了JS实现输入框提示文字点击时消失效果,涉及javascript针对鼠标的响应及事件监听机制相关技巧,需要的朋友可以参考下2016-07-07
这篇文章主要介绍了页面实时更新时间的JS实例代码，有需要的朋友可以参考一下2013-12-12
这篇文章主要介绍了JavaScript new对象的四个过程,结合实例形式简单分析了javascript面向对象程序设计中new对象的四个过程相关原理与实现方法,需要的朋友可以参考下2018-07-07
这几天不是很忙，就找了些拖动布局方面的资料看看，也学着写了个拖动布局的效果，没想到花了好多时间， 七拼八凑，总算是把这个效果写出来了。哎！还是js的功夫太差。因为是边找资料边写的，很多地方印象不深， 时间一长，再重新写估计也难，所以把当时的思路记录一下！也希望大虾指点一下！2008-05-05
本篇文章主要介绍了three.js实现3D模型展示的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要为大家详细介绍了用js实现简单轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
引入autocomplete组件时JS报未结束字符串常量错误
在引入jQuery的autocomplete组件时，遇到js报未结束字符串常量错误，原因及解决方法如下，大家可以参考下2014-03-03
将Url进行编码,前台JS需要使用这段内容,这时候就需要解码了2010-01-01
最近做项目遇到一需求要求实现数值从0到10来回变化，下面小编给大家分享下实现代码，需要的朋友参考下2016-12-12
最新评论