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

2022-07-07 23:04:35 阅读：155 来源： 互联网

标签：stringify const 巨坑 JSON obj 拷贝 objCopy

本人已参与「新人创作礼」活动，一起开启掘金创作之路。

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会直接丢失

    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()来实现深拷贝吗？

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

javascript高级篇之实现深拷贝的四种方式 - 掘金 (juejin.cn)

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

总结

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

来源：https://juejin.cn/post/7113829141392130078

标签：stringify,const,巨坑,JSON,obj,拷贝,objCopy
来源： https://www.cnblogs.com/konglxblog/p/16456427.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。