欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 教育 > 锐评 > 日常开发中,使用JSON.stringify来实现深拷贝的坑

日常开发中,使用JSON.stringify来实现深拷贝的坑

2025/11/10 20:38:07 来源:https://blog.csdn.net/weixin_44823731/article/details/145690315  浏览:    关键词:日常开发中,使用JSON.stringify来实现深拷贝的坑

使用JSON.stringify的方式来实现深拷贝的弊端

弊端一:无法拷贝NaN、Infinity、undefined这类值

在这里插入图片描述

无法拷贝成功的原因:

对于JSON来说,它支持的数据类型只有null、string、number、boolean、Object、Array,所以对于它不支持的数据类型就会自动转成null。

为什么undefined拷贝会丢失?

因为JSON不支持undefined这个数据类型,并且undefined相当于没有定义,所以就无法拷贝成功。
例如下图:我给obj.c设为undefined,但我没有给obj.tttttttttt设置任何值,它也是undefined。
在这里插入图片描述

弊端二:无法拷贝循环引用

什么是循环引用

如下图:目标对象的子孙属性中,赋值了目标对线,就会导致循环引用。
在这里插入图片描述

对循环对象使用JSON.stringify进行深拷贝时会出现报错

如下图所示:
在这里插入图片描述

解决方案

解决方案的话,一般就是使用第三方库的深拷贝方法处理啦。
不过下面我会介绍在自己手写深拷贝的时候,如何去解决循环引用问题(为了面试)。

先上代码:

function deepClone(target, mapObj = new WeakMap()) {let res;const typeStr = Object.prototype.toString.call(target);if(typeStr === '[object Object]') {res = {};} else if (typeStr === '[object Array]') {res = [];} else {return target;}Object.keys(target).forEach(key => {if(target.hasOwnProperty(key)) {if(typeof target[key] === 'object') {if (mapObj.get(target[key])) {res[key] = target[key]} else {mapObj.set(target[key], target[key]);res[key] = deepClone(target[key], mapObj);}} else {res[key] = target[key];}}})return res;
}

这里的话,主要是引用了weakMap来处理循环引用问题,因为weakMap支持key是一个对象。
手写deepClone的话,就无需兼容上面弊端一的问题了,因为js是支持NaN、Infinity这些数据类型的。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词