JSON序列化

JSON序列化

• 某些情况下我们希望将JavaScript中的复杂类型转化成JSON格式的字符串，这样方便对其进行处理： p比如我们希望将一个对象保存到localStorage中； p但是如果我们直接存放一个对象，这个对象会被转化成 [object Object] 格式的字符串，并不是我们想要的结果；

const obj = {
  name: 'james',
  age: 18,
  friends: {
    name: 'kobe'
  },
  hobbies: ['篮球', '足球']
}
const info = localStorage.setItem('obj', obj)

JSON序列化方法

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

1. pstringify方法：将JavaScript类型转成对应的JSON字符串；
2. pparse方法：解析JSON字符串，转回对应的JavaScript类型；

• 那么上面的代码我们可以通过如下的方法来使用：

const obj = {
  name: 'james',
  age: 18,
  friends: {
    name: 'kobe'
  },
  hobbies: ['篮球', '足球']
}

// 转成字符串保存
const objString = JSON.stringify(obj)
localStorage.setItem('obj', objString)


const itemString = localStorage.getItem('obj')
const info = JSON.parse(itemString)

console.log(info)

Stringify的参数

• JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串：
• p如果指定的 replacer 是数组，则可选择性地仅包含数组指定的属性

const obj = {
  name: 'james',
  age: 18,
  friends: {
    name: 'kobe'
  },
  hobbies: ['篮球', '足球']
}

const objString = JSON.stringify(obj, ['age', 'name'])

console.log(objString) // {"age":18,"name":"james"}

const objString1 = JSON.stringify(obj, (key, value) => {
  if(key === 'age') {
    return value + 1
  }
  return value
})
console.log(objString1)// {"name":"james","age":19,"friends":{"name":"kobe"},"hobbies":["篮球","足球"]}

• Stringify的参数space

const obj = {
  name: 'james',
  age: 18,
  friends: {
    name: 'kobe'
  },
  hobbies: ['篮球', '足球']
}

const objString = JSON.stringify(obj, null, '--') // 可以字符串，可以数字，方便我们查看JSON
console.log(objString)

parse方法

• JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。 p提供可选的 reviver 函数用以在返回之前对所得到的对象执行变换(操作)。

const obj = {
  name: 'james',
  age: 18,
  friends: {
    name: 'kobe'
  },
  hobbies: ['篮球', '足球']
}
const objString = JSON.stringify(obj)
const objString1 = JSON.parse(objString)
console.log(objString1)

const objString2 = JSON.parse(objString, (key, value) =>{
  if(key === 'age') {
    return value - 1
  }
  return value
})

console.log(objString2)

使用JSON序列化深拷贝

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

const obj = {
  name: 'james',
  age: 18,
  friends: {
    name: 'kobe'
  },
  hobbies: ['篮球', '足球']
}
const objString = JSON.stringify(obj)
const obj2 = JSON.parse(objString)
console.log(obj2 === obj) // false

obj2.friends.name = 'test'

console.log(obj.friends.name) // kobe 不变的

• 注意：这种方法它对函数是无能为力的
• 创建出来的新对象中是没有函数的，这是因为stringify并不会对函数进行处理；