JSON.stringify()及其使用场景

JSON.stringify()及常用使用场景

JSON.stringify()是一个序列化对象的方法可接收三个参数。第一个参数是要序列化的对象，第二个参数是过滤器，可以是数组或函数；第三个参数是用于缩进结果JSON字符串的选项。

一、过滤器参数

1. 如果第二个参数是数组：
   此时数组中的属性就对应着要序列化的对象中的属性["title","author"]。所以此时序列化后的JSON字符串中只包含title和author。

let book = {
	title:'活着',
	author:'余华',
	protagonist:'福贵'
	}
let jsonText = JSON.stringify(book,["title","author"]);
console.log(jsonText)
// {"title":"活着","author":"余华"}

2. 如果第二个参数是函数：
   此时函数里面基于key进行了过滤，如果key===’title‘返回undefined忽略该属性，否则返回value。所以最终的到的字符串是这样的 {"author":"余华","protagonist":"福贵"}

let book = {
	title:'活着',
	author:'余华',
	protagonist:'福贵'
	}
let jsonText = JSON.stringify(book,(key, value)=>{
	if(key === 'title'){return undefined} return value;
});
console.log(jsonText)
// {"author":"余华","protagonist":"福贵"}

二、字符串缩进

JSON.stringify()方法的第三个参数控制缩进和空格。在这个参数是数值时，表示每一级缩进的空格数。如果你缩进的时候用的是一个字符串而非数值，那JSON字符串就会使用这个字符串而不是空格来进行缩进。

1. 例如，每级缩进4个空格(缩进最大值为10)，可以这样：

let book = {
	title:'活着',
	author:'余华',
	protagonist:'福贵'
	}
let jsonText = JSON.stringify(book, null, 4);

此时得到的结果就如下：

2. 如果是非数值时是这样：

toJSON方法

这里book对象中定义的toJSON()方法返回了title，这个对象会被序列化为简单字符串而非对象。toJSON()方法可以返回任意序列化值。

let book = {
	title:'活着',
	author:'余华',
	protagonist:'福贵',
	obj:{
		age:18
	},
	toJSON:function(){
		return this.title
	}
}
let stringify1 = JSON.stringify(book)
console.log(stringify1) // "活着"

JSON.stringify()的常用使用场景

1. 存储localStorage

let book = {
	title:'活着',
	author:'余华',
	protagonist:'福贵'
	}
// 存
localStorage.setItem('storageDemo',JSON.stringify(book))
// 取
let newData =  JSON.parse(localStorage.getItem('storageDemo'))

console.log(localStorage.getItem('storageDemo'))
// '{"title":"活着","author":"余华","protagonist":"福贵"}'
console.log(newData)
// {title: '活着', author: '余华', protagonist: '福贵'}

2. 深拷贝

let book = {
	title:'活着',
	author:'余华',
	protagonist:'福贵'
	}
let book2 = JSON.parse(JSON.stringify(book));

3. 删除对象属性

let book = {
	title:'活着',
	author:'余华',
	protagonist:'福贵'
	}
let jsonText = JSON.stringify(book,(key, value)=>{
	if(key === 'title'){return undefined} return value;
});
console.log(jsonText)
// '{"author":"余华","protagonist":"福贵"}'