JSON序列化方法

在ES5中引用了JSON全局对象，该对象有两个常用的方法：

stringify方法：将JavaScript类型转成对应的JSON字符串；

parse方法：解析JSON字符串，转回对应的JavaScript类型；

Stringify方法

JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串

如果指定了一个 replacer 函数，则可以选择性地替换值；

如果指定的 replacer 是数组，则可选择性地仅包含数组指定的属性；

1. 直接转换的方式

const obj = {
    'name':'sabo',
    'age':18,
    'girlfriend':["aa","bb"]
}

const jsonString1 = JSON.stringify(obj)
console.log(jsonString1)

2.stringify第二个参数replacer 传入数组: 设定哪些是需要转换

const jsonString2 = JSON.stringify(obj, ["name", "girlfriend"])
console.log(jsonString2)

传入回调函数的方式

const jsonString3 = JSON.stringify(obj, (key, value) => {
  if (key === "age") {
    return value + 1
  }
  return value
})
console.log(jsonString3)

parse方法

JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。

提供可选的 reviver 函数用以在返回之前对所得到的对象执行变换(操作)。

const JSONString = '{"name":"sabo","age":19,'girlfriend':["aa","bb"],"hobbies":["足球"]}'

const info = JSON.parse(JSONString, (key, value) => {
  if (key === "age") {
    return value - 1
  }
  return value
})
console.log(info)

使用JSON序列化深拷贝

const obj = {
    'name':'sabo',
    'age':18,
    'friends':{
        name:"aaa"
    },
    'girlfriend':["aa","bb"]
}

将obj对象的内容放到info变量中

第一种方法：引用赋值

const info = obj
obj.age = 100
console.log(info.age)

这样操作看似没有问题，但是如果我们修改obj对象的age值，info也会发生变化

第二种方法：浅拷贝

const info2 = { ...obj }
obj.age = 1000
console.log(info2.age)

obj.friends.name = "james"
console.log(info2.friends.name)

这里操作还是有一些问题，如果修改obj对象中friends对象的参数，info也会发生变化

3.stringify和parse来实现

const jsonString = JSON.stringify(obj)
console.log(jsonString)
const info3 = JSON.parse(jsonString)
obj.friends.name = "asdasda"
console.log(info3.friends.name)
console.log(info3)

我们生成的新对象和之前的对象并不是同一个对象：相当于是进行了一次深拷贝；

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第18天，点击查看活动详情