使用JSON.stringify()去实现深拷贝,要小心哦,可能有巨坑

简介: 使用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

遇见问题,这是你成长的机会,如果你能够解决,这就是收获。

相关文章
|
XML JSON 前端开发
前端深浅拷贝各有哪些方法,优缺点
前端深浅拷贝各有哪些方法,优缺点
254 0
|
JavaScript 前端开发 UED
JS实现绑定事件监听的几种方法详解
JS实现绑定事件监听的几种方法详解
344 0
|
Web App开发 JavaScript 前端开发
2023Node.js零基础教程(小白友好型),nodejs新手到高手,(一)NodeJS入门
2023Node.js零基础教程(小白友好型),nodejs新手到高手,(一)NodeJS入门
542 0
|
13天前
|
存储 移动开发 缓存
前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
本文全面解析前端三种数据存储方式:Cookie、LocalStorage与SessionStorage。涵盖其定义、使用方法、生命周期、优缺点及典型应用场景,帮助开发者根据登录状态、用户偏好、会话控制等需求,选择合适的存储方案,提升Web应用的性能与安全性。(238字)
226 0
|
前端开发
css页面顶部底部固定,中间自适应几种方法
【10月更文挑战第22天】css页面顶部底部固定,中间自适应几种方法
|
JavaScript
js【详解】深拷贝 (含 JSON.parse(JSON.stringify(obj)) 的缺陷,5种手写深拷贝)
js【详解】深拷贝 (含 JSON.parse(JSON.stringify(obj)) 的缺陷,5种手写深拷贝)
580 0
|
SQL 前端开发 测试技术
什么是 API ?
API 即应用程序接口(API:Application Program Interface),应用程序接口是一组定义、程序及协议的集合,通过 API 接口实现计算机软件之间的相互通信。
1622 2
|
存储 缓存 运维
缓存技术有哪些优缺点呢
【10月更文挑战第19天】缓存技术有哪些优缺点呢
|
Web App开发 数据安全/隐私保护
防止打开控制台
防止打开控制台
703 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
397 5