JavaScript系列—关于JSON.parse(JSON.stringify(obj))实现深拷贝应该注意的坑

妖狐艹你老母 2024-04-17 20:52 27阅读 0赞

`JSON.parse(JSON.stringify(obj))`我们一般用来深拷贝，其过程说白了 就是利用JSON.stringify 将js对象序列化（JSON字符串），再使用JSON.parse来反序列化(还原)js对象；序列化的作用是存储(对象本身存储的只是一个地址映射，如果断电，对象将不复存在，因此需将对象的内容转换成字符串的形式再保存在磁盘上 )和传输（例如 如果请求的`Content-Type`是 `application/x-www-form-urlencoded`，则前端这边需要使用`qs.stringify(data)`来序列化参数再传给后端，否则后端接受不到； ps: `Content-Type` 为 `application/json;charset=UTF-8`或者 `multipart/form-data` 则可以不需要 ）；我们在使用 `JSON.parse(JSON.stringify(xxx))`时应该注意一下几点：  
1、如果obj里面有时间对象，则JSON.stringify后再JSON.parse的结果，时间将只是字符串的形式。而不是时间对象；

var test = {
            name: 'a',
            date: [new Date(1536627600000), new Date(1540047600000)],
          };
    
          let b;
          b = JSON.parse(JSON.stringify(test))

![format_png][]

test 结果.png

![format_png 1][]

b的结果

![format_png 2][]

测试b和test类型

2、如果obj里有RegExp、Error对象，则序列化的结果将只得到空对象；

const test = {
            name: 'a',
            date: new RegExp('\\w+'),
          };
          // debugger
          const copyed = JSON.parse(JSON.stringify(test));
          test.name = 'test'
          console.error('ddd', test, copyed)

![format_png 3][]

image.png

3、如果obj里有函数，undefined，则序列化的结果会把函数或 undefined丢失；

const test = {
            name: 'a',
            date: function hehe() {
              console.log('fff')
            },
          };
          // debugger
          const copyed = JSON.parse(JSON.stringify(test));
          test.name = 'test'
          console.error('ddd', test, copyed)

![format_png 4][]

image.png

![format_png 5][]

image.png

4、如果obj里有NaN、Infinity和-Infinity，则序列化的结果会变成null

![format_png 6][]

image.png

5、JSON.stringify()只能序列化对象的可枚举的自有属性，例如 如果obj中的对象是有构造函数生成的， 则使用JSON.parse(JSON.stringify(obj))深拷贝后，会丢弃对象的constructor；

function Person(name) {
            this.name = name;
            console.log(name)
          }
    
          const liai = new Person('liai');
    
          const test = {
            name: 'a',
            date: liai,
          };
          // debugger
          const copyed = JSON.parse(JSON.stringify(test));
          test.name = 'test'
          console.error('ddd', test, copyed)

![format_png 7][]

image.png

6、如果对象中存在循环引用的情况也无法正确实现深拷贝；

以上，如果拷贝的对象不涉及上面讲的情况，可以使用JSON.parse(JSON.stringify(obj))实现深拷贝，但是涉及到上面的情况，可以考虑使用如下方法实现深拷贝：

推荐资料

1、[JavaScript之对象序列化详解][JavaScript]  
2、[javaScript中浅拷贝和深拷贝的实现][javaScript]

作者：该帐号已被查封  
链接：https://www.jianshu.com/p/b084dfaad501  
来源：简书  
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMTY2OTgwLWUzOTc4OTU2NjllODRlY2EucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy84NjUvZm9ybWF0L3dlYnA?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMTY2OTgwLTgzZWI5NjJjMjFhYjMxZDQucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy81NjEvZm9ybWF0L3dlYnA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMTY2OTgwLTA4YTBjZDAwODMwNzg3OGQucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8yNDMvZm9ybWF0L3dlYnA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMTY2OTgwLTU1N2RkMzlkMGVmNGM3OWIucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy85MzMvZm9ybWF0L3dlYnA?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMTY2OTgwLWY0NTk4MWZkMTg4Y2MxZjkucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy80OTEvZm9ybWF0L3dlYnA?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMTY2OTgwLTliN2VmMDU0MDhlZTVhN2UucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy83MzQvZm9ybWF0L3dlYnA?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMTY2OTgwLTMyODI1NGY0MjE3MzUyNzAucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy81MDMvZm9ybWF0L3dlYnA?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMTY2OTgwLWFjOGZjOTIwZWFlM2Y4ODUucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy85MTcvZm9ybWF0L3dlYnA?x-oss-process=image/format,png
[JavaScript]: http://www.cnblogs.com/craftsman-gao/p/5130567.html
[javaScript]: https://github.com/wengjq/Blog/issues/3