使用JSON.stringify()去实现深拷贝,要小心哦,可能有巨坑
对象中有时间类型的时候(时间类型会被变成字符串类型数据)
const obj = {
date: new Date()
}
console.log(typeof obj.date === 'object') //true
const objCopy = JSON.parse(JSON.stringify(obj));
console.log(obj.date.getTime()) //正常使用
console.log(typeof objCopy.date) //输出的值字符串 string
console.log(objCopy.date.getTime()) // 报错 objCopy.date.getTime is not a function
我们就会惊讶的发现,
getTime ()调不了了???(是不是有点奇怪)
getYearFull()也调不了了。
就所有时间类型的内置方法都调不动了。
但,string类型的内置方法全能调了。

对象中有undefined或function类型时,他们会直接丢失
const obj = {
undef: undefined,
fun: () => { console.log('叽里呱啦,阿巴阿巴') }
}
console.log("obj",obj);
const objCopy = JSON.parse(JSON.stringify(obj));
console.log("objCopy",objCopy)
然后你就会发现,这两种类型的数据都没了。
返回来的是一个空对象

当对象中有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()来实现深拷贝吗?
如果你拷贝的对象中有 new Date,undefined,函数,NaN,infinityMax, infinityMin。
这6种的时候,你就要小心了,就会出现问题
如果还在使用的话,小心了。
文章来自链接:https://juejin.cn/post/7113829141392130078
使用JSON.stringify()去实现深拷贝,要小心哦,可能有巨坑的更多相关文章
- 用JSON.stringify去实现深拷贝的弊端
无法处理function啦还有RegExp啦,还有无法处理循环引用对象(这个我还没有test) 就前两点的话 var a={ a:, b:new RegExp('test'), c:function( ...
- 关于JSON.parse(JSON.stringify(obj))实现深拷贝应该注意的坑
JSON.parse(JSON.stringify(obj))我们一般用来深拷贝,其过程说白了 就是利用JSON.stringify 将js对象序列化(JSON字符串),再使用JSON.parse来反 ...
- JSON.parse(JSON.stringify()) 实现对对象的深拷贝
JSON.parse(JSON.stringify(obj))我们一般用来深拷贝,其过程说白了 就是利用JSON.stringify 将js对象序列化(JSON字符串),再使用JSON.parse来反 ...
- JSON.stringify方法报错:Converting circular structure to JSON
别以为JSON.parse(JSON.stringify(data))做深拷贝无敌,对于以下这种情况,当你需要保留父级对象,即 对象存在循环引用,就会报错. var a = [ { "id& ...
- 使用JSON.parse(),JSON.stringify()实现对对象的深拷贝
根据不包含引用对象的普通数组深拷贝得到启发,不拷贝引用对象,拷贝一个字符串会新辟一个新的存储地址,这样就切断了引用对象的指针联系. 测试例子: var test={ a:"ss", ...
- 实现深拷贝还在用JSON.parse(JSON.stringify(obj))?带你用JS实现一个完整版深拷贝函数
使用JavaScript实现深拷贝 1.JSON序列化实现深拷贝 在JS中,想要对某一个对象(引用类型)进行一次简单的深拷贝,可以使用JSON提供给我们的两个方法. JSON.stringfy():可 ...
- JSON.stringify() 的深入理解
目录 序言 语法 深入理解 序言 最近在看<你所不知道的javascript>[中卷]一书,第一部分是类型和语法.本文是基于这部分的产物.在强制类型转换->抽象值操作-> to ...
- JSON.stringify()还可以这么用
最近做项目的时候遇到一个对象深拷贝的问题,网上看了下发现最为简便的方法是JSON.stringify(),比如你要深拷贝一个对象,可以这么做: var test={ a:"hello&quo ...
- JSON.parse和JSON.stringify 参数详解
JSON.parse和JSON.stringify这两个浏览器自带(IE6/7除外)的方法平常我们经常用到,但是一般都只是用到了他们的第一个参数,比如字符串转对象:JSON.parse('{}') ...
- 用json方法来作深拷贝应该知道的一点东西!
之前写js比较多的的时候也写过深拷贝,浅拷贝,继承啥的,还有自定义的监听事件.然而过了很久都忘了. 最近在项目上用的深拷贝都是 b = JSON.parse( JSON.stringify(a) ) ...
随机推荐
- 如何用Xcode安装ipa
Xcode安装ipa iOS APP上架App Store其中一个步骤就是要把ipa文件上传到App Store! 下面进行步骤介绍! 利用Appuploader这个软件,可以在Windows.L ...
- 开心档之MySQL 创建数据表
MySQL 创建数据表 创建MySQL数据表需要以下信息: 表名 表字段名 定义每个表字段 语法 以下为创建MySQL数据表的SQL通用语法: CREATE TABLE table_name (col ...
- 企业新道路怎么走?火山引擎AB测试助力决策选择
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 乐刻是一家创立8年的企业,除了消费者熟悉的乐刻健身房可办月卡.24小时营业等,其还有比外界了解更多元的业务.目 ...
- 从飞书妙记秒开率提升,看火山引擎A/B测试在研发场景的应用
作者:DataTester 用户体验是决定互联网产品能否长久生存的关键,每一个基于产品功能.使用和外观的微小体验,都将极大地影响用户留存和满意度. 对于企业协作平台飞书而言,用户体验旅程从打开 ...
- 低至200元 / 月,火山引擎DataLeap帮你搭建企业级数据中台
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 企业数字化转型正席卷全球,这不仅是趋势所在,也是企业发展必然面对的考题.数字化不仅仅考验企业的技术"硬& ...
- 用 Python 开发了一个 PDF 抽取Excel表格的小工具
大家好哇 从 PDF 里 copy 表格时,粘贴出来后格式都是错乱的.这麻烦事交给 Python 再合适不过里,我开发了一个从 PDF 抽取表格另存为 Excel 文件的应用,我把它部到 huggin ...
- ME51N 采购申请屏幕增强仅显示字段
1.业务需求 通过委外工单生成的采购申请,需要将自定义"图号"字段显示在采购申请中,且只用于显示即可 2.增强实现 增强表EBAN的结构CI_EBANDB 增强点CMOD:MERE ...
- 安装vue脚手架@vue/cli 4.5.13(稳定版)
若 NPM 下载过慢,请参考本处改换镜像源:Here 首先新建一个 vue 测试项目,还记得以前自己是用 vue-cli 2.0的版本 去构建的,毕竟里面有默认配置好的webpack配置,但现在很多小 ...
- Win10中docker的安装与使用
1.docker的安装 环境准备 Docker for Windows是一个Docker Community Edition(CE)应用程序.Docker for Windows安装包包含了在Wind ...
- VUE里使用iframe在更改了src之后对应的网页并未刷新解决方案
在vue 里使用iframe,在更新src后页面并未刷新, 在更改iframe src属性值之前加上这一句即可 document.getElementById(iframe的id).contentWi ...