利用 JSON 深拷贝的弊端

深拷贝不仅将原对象的各个属性逐个复制出去,而且将原对象各个属性所包含的对象也依次采用深拷贝的方法递归复制到新对象上。

function deepClone(obj){
    
    
    return obj_ = JSON.parse(JSON.stringify(obj)),
}
let a=[1,2,3,4,[2,3,4]],
b = deepClone(a);

弊端:

1.如果 obj 里面有时间对象,则 JSON.stringify 后再 JSON.parse 的结果,时间将转为字符串的形式,而不是对象的形式

let obj = {
    
    
    a:123,
    b:[new Date(),new Date()]
}
let newObj = JSON.parse(JSON.stringify(obj));
console.log(obj,newObj);

在这里插入图片描述

2.如果 obj 里有 RegExp (正则表达式的缩写)、Error 对象,则序列化的结果将只得到空对象;

let obj = {
    
    
    a:123,
    b:/aabb[a-z]\d/,
    c:new TypeError('typeError')
}
let newObj = JSON.parse(JSON.stringify(obj));
console.log(obj,newObj);

在这里插入图片描述

3、如果 obj 里有函数(function),undefined,Symbol 则序列化的结果会把 function 或 undefined 丢失;

let obj = {
    
    
    a:123,
    fn:function(){
    
    let a = 123;console.log(a)},
    c:undefined,
    d:Symbol('foo')
}
let newObj = JSON.parse(JSON.stringify(obj));
console.log(obj,newObj);

在这里插入图片描述

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

let obj = {
    
    
    a:123,
    b:NaN,
    c:Infinity,
    d:-Infinity
}
let newObj = JSON.parse(JSON.stringify(obj));
console.log(obj,newObj);

在这里插入图片描述

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

class Student{
    
    
    constructor(){
    
    
        this.a = 1;
        this.b = 2;
    }
}
let obj = {
    
    
    a:123,
    b:new Student()
}
let newObj = JSON.parse(JSON.stringify(obj));
console.log(obj,newObj);

在这里插入图片描述

手动设置某属性不可枚举:

let obj = {
    
    
    a:123,
    b:234
}
Object.defineProperty(obj,'c',{
    
    
    value:22,
    enumerable:false,
})
let newObj = JSON.parse(JSON.stringify(obj));
console.log(obj,newObj);

在这里插入图片描述

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

当存在循环引用的时候,JSON.stringify 会一直去序列化所有对象,包括引用的对象,一直往复会爆栈,所以JSON.stringify 遇到循环引用会直接抛出异常,解决方法,利用一个 map 来存储对象(利用JSON.stringify的第二个参数)

let a = {
    
    aaa: 123}
let b = {
    
    bbb: 234}
a.child = b
b.parent = a
 
// 声明cache变量,便于匹配是否有循环引用的情况
let cache = []
let res = JSON.stringify(a, function(key, value){
    
    
  if (typeof value === 'object' && value !== null) {
    
    
    if (cache.includes(value)) {
    
    
      // 移除
      return
    }
    // 收集所有对象
    cache.push(value)
  }
  return value
})
// 清空,便于垃圾回收机制回收
cache = null
 
console.log(res) //'{"aaa":123,"child":{"bbb":234}}'

总结:

Date 对象变为字符串 RegExp、Error 对象变为空对象 {} 函数、undefined、Symbol 属性丢失
NaN、Infinity、-Infinity 变为 null enumerable 为 false 的属性丢失 循环引用的对象不能正确拷贝
用法简单,然而使用这种方法会有一些隐藏的坑:因为在序列化 JavaScript 对象时,所有函数和原型成员会被有意忽略。

通俗点说,JSON.parse(JSON.stringfy(X)),其中 X 只能是 Number, String, Boolean,
Array,扁平对象,即那些能够被 JSON 直接表示的数据结构。

猜你喜欢

转载自blog.csdn.net/ithunzi/article/details/132297177
今日推荐