利用 JSON.stringify 深拷贝的弊端

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

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

结果:

弊端:

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 直接表示的数据结构。

JSON.stringify() 常用方式

判断数组是否包含某对象,或者判断对象是否相等

是否相等:

let obj = {
    a:123,
    b:456,
}
let obj2 = {
    a:123,
    b:456,
}
console.log(JSON.stringify(obj) === JSON.stringify(obj2));//true

是否包含:

let arr = [
    {a:1,b:2},
    {a:2,b:3},
    {a:3,b:4}
]
let obj = {a:2,b:3}
console.log(JSON.stringify(arr).includes(JSON.stringify(obj)));//true

让 localStorage / sessionStorage 可以存储对象。

localStorage/sessionStorage 默认只能存储字符串,而实际开发中,我们往往需要存储的数据多为对象类型,那么这里我们就可以在存储时利用 Json.stringify() 将对象转为字符串,取出时利用 JSON.parse() 将字符串转为对象即可。

sessionStorage.setItem('user',JSON.stringify({name:'aaa',age:16}));
console.log(JSON.parse(sessionStorage.getItem('user')));//{name: "aaa", age: 16}

JSON.stringify()与toString()这两者虽然都可以将目标值转为字符串,但本质上还是有区别的

let arr = [12,12,12];
console.log(JSON.stringify(arr),arr.toString());
//[12,12,12] 12,12,12

  • 6
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值