千万不要用JSON.stringify()去实现深拷贝!有巨坑!!

千万不要用JSON.stringify()去实现深拷贝!有巨坑!!已关闭评论
点击下方“前端开发爱好者”,选择“设为星标
第一时间关注技术干货!

哈喽,大家好 我是xy👨🏻‍💻。千万不要用 JSON.stringify()去实现深拷贝!有巨坑!!🤪🤪

1.当对象中有时间类型的元素时候

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

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 类型的内置方法全能调了。

2.当对象中有 undefined 类型或 function 类型的数据时

undefined 和 function 会直接丢失

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

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

3.当对象中有 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")

4.当对象循环引用的时候

会报错

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,
    undefundefined,
    fun() => { console.log('叽里呱啦,阿巴阿巴') },
    date:new Date,
}

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

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

总结

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

原文连接:https://juejin.cn/post/7113829141392130078 作者:工边页字

写在最后

公众号前端开发爱好者 专注分享 web 前端相关技术文章视频教程资源、热点资讯等,如果喜欢我的分享,给 🐟🐟 点一个 👍 或者 ➕关注 都是对我最大的支持。

欢迎长按图片加好友,我会第一时间和你分享前端行业趋势面试资源学习途径等等。

添加好友备注【进阶学习】拉你进技术交流群

关注公众号后,在首页:

  • 回复面试题,获取最新大厂面试资料。
  • 回复简历,获取 3200 套 简历模板。
  • 回复React实战,获取 React 最新实战教程。
  • 回复Vue实战,获取 Vue 最新实战教程。
  • 回复ts,获取 TypeScript 精讲课程。
  • 回复vite,获取 Vite 精讲课程。
  • 回复uniapp,获取 uniapp 精讲课程。
  • 回复js书籍,获取 js 进阶 必看书籍。
  • 回复Node,获取 Nodejs+koa2 实战教程。
  • 回复数据结构算法,获取数据结构算法教程。
  • 回复架构师,获取 架构师学习资源教程。
  • 更多教程资源应有尽有,欢迎关注获取

来源: 前端开发爱好者