JSON 序列化和反序列化你真的会了吗？

- 我们在开发过程中使用序列化的场景大部分都是对象的拷贝，或者传给后端JOSN数据等。
本篇文章会让你更加的深入理解序列化，玩出一些更高级的写法。

JSON.parse()

• 将JSON 字符串构造成 js 对象

1、基础用法

const str = '{"name":"ajin","age":18,"sex":"男","hobby":"learn"}'
JSON.parse(str)
// 得到结果
{
	"name":"ajin",
	"age":18,
	"sex":"男",
	"hobby":"learn"
}

2、带reviver参数，为JSON.parse的第二个参数（可选）

const str = '{"name":"ajin","age":18,"sex":"男","hobby":"learn"}'

/** key: JSON 字符串的key, value: JSON字符串的值 */
const reviverAction = (key, value) => {
	console.log(key, value)
}
JSON.parse(str, reviverAction)

3、通过第二个参数实现属性过滤

const str = '{"name":"ajin","age":18,"sex":"男","hobby":"learn"}'

const reviverAction = (key, value) => {
	if(key === 'name') {
		return undefined
	}
	return value
	
}
const obj = JSON.parse(str, reviverAction)
console.log(obj)

• 当reviver函数返回undefined 时，该对象属性就会被过滤。

JSON.stringify()

1、基础用法

const obj = {
	name: 'ajin',
	age: '18',
	sex: '男',
}
console.log(JSON.stringify(obj))
// '{"name":"ajin","age":"18","sex":"男"}'

2、第二个参数（replacer, []）的用法

// 当第二个参数为函数的时候，过滤数据
const obj = {
	name: 'ajin',
	age: '18',
	sex: '男',
}
const strObj = JSON.stringify(obj, (key, value) =>{
   if(typeof value === 'number') {
     return undefined
   }
   return value
})
// 打印结果：{"name":"ajin","sex":"男"}

// 第二个参数为数组时候[]
const strObj1 = JSON.stringify(obj, ['name', 'sex'])
// 打印结果：{"name":"ajin","sex":"男"}

• replacer 函数也起到一个过滤属性的作用，返回undefined。则值被过滤掉
• [] 数组里面的属性就是要被返回的属性。没有在数组里面的属性则被过滤掉

3、第三个参数 space 美化输出格式

const obj = {
	name: 'ajin',
	age: '18',
	sex: '男',
}
JSON.stringify(obj, ['name', 'sex'], '\t')

• 插入制表符 ‘\t’ 后，输出格式得到了换行

toJSON 方法

const obj = {
  name: 'ajin',
  age: 18,
  sex: '男',
  idCard: '191010101',
  toJSON() {
    return {
      name: 'ajin',
      sex: '男',
    }
  }
}
const strObj = JSON.stringify(obj)
// 输出结果：'{"name":"ajin","sex":"男"}'

• 当对象里面存在toJSON 方法时，JSON.stringify 会调用toJSON 。 根据toJSON的返回值序列化为json字符串

• 更多信息请参考 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify