00x0 写在前面
在使用ajax请求数据的过程中,经常需要用到JSON的两个方法:
JSON.stringify()和JSON.parse()两个方法来处理数据。那什么时候需要用到JSON.stringify(),什么时候需要用到JSON.parse()呢?马上就细细道来。
00x1 JSON.stringify()
JSON.stringify()用于将 JavaScript对象序列化为JSON字符串
1.1 序列化对象
JSON.stringify()用于将 JavaScript对象序列化为JSON字符串。第一个参数是要序列化的JavaScript对象,此外还可以接收两个参数,指定以不同的方式序列化JavaScript对象。
1.2 过滤器
第二个参数是过滤器,可以是数组、函数。如果过滤参数是数组,JSON.stringify()的结果中将只会包含数组中列出的属性。
1 过滤器是数组
如下所示,JSON.stringify()的第二个参数是一个数组,最终得到的result中之后包含”name”和”age”两个属性。
|
|
2 过滤器是函数(replacer)
函数要接收两个参数,属性(键)名和属性值。根据属性(键)名可以知道应该如何处理要序列化的对象中的属性。属性名只能是字符串,如果值不是键值对儿结构的值时,键名可以是空字符串。
|
|
1.3 字符串缩进
第三个参数是一个选项,表示是否在JSON字符串中保留缩进,用于控制结果中的缩进和空白符。
1.3.1 参数是数字
如果是数字的话,表示的是每个级别缩进的空格数。
如下所示,第三个参数是4,表明每一行缩进4个空格。
|
|
最大空格数是10,所有大于10的都会自动转换为10.
1.3.2 参数是字符串
如果缩进参数是字符串,则这个字符串在JSON字符串中被用作缩进字符(代替空格)。常将缩进字符设置为制表符,或者两个短划线之类的任意字符。
|
|
缩进字符串不能超过10个字符长。如果字符串超过了10个,结果中将只出现10个字符。
1.4 使用场景
1.4.1 格式化对象
格式化一些复杂的对象,这些对象往往对象内嵌套对象,直接看起来并不直观。
1.4.2 AJAX请求中序列化传值
在使用AJAX的POST方法向服务器传值时,使用JSON.stringify()进行参数的序列化。
1.4.3 判断数组是否包含某对象,或判断对象是否相等
|
|
1.4.4 让localStorage/sessionStorage可以存储对象
localStorage/sessionStorage默认只能存储字符串,而实际开发中,我们往往需要存储的数据多为对象类型,因此可以在存储时利用JSON.stringify()将对象转为字符串,而在取缓存时,只需配合json.parse()转回对象即可。
00x2 JSON.parse()
JSON.parse()用于将 JSON字符串解析为原生的JavaScript值。
2.1 解析对象
JSON.parse()的第一个参数是要进行解析的JavaScript对象。
需要注意的是,
JSON.parse() 不允许用逗号作为结尾
单引号与双引号
使用JSON.parse()方法来转化成json对象的数据格式的话,需要注意的是被转化的字符串里面的属性要使用引号,并且总体是单引号套双引号的方式。否则会报错。
|
|
2.2 还原函数(reviver)
JSON.parse()还可以接收另外一个参数,该参数是一个函数,接收两个参数,属性(键)名和属性值,将在每个键值对上调用。称为还原函数。
如果还原函数返回undefined,则表示从结果中删除相应的键。
如果返回其他值,则将该值插入到结果中。
|
|
2.3 使用场景
2.3.1 解析AJAX请求的响应数据
通过AJAX请求返回的响应数据,可以用JSON.parse()进行解析。
00x3 两者联合
JSON.stringify()和JSON.parse()互为逆操作,有以下使用场景。
AJAX的请求与响应。AJAX的请求中使用JSON.stringify()序列化参数,AJAX的响应中使用JSON.parse()解析响应数据。
localStorage和sessionStorage的存取。使用JSON.stringify()序列化参数用于存储对象,使用JSON.parse()解析读取后的字符串。
深拷贝的实现。使用JSON.parse(JSON.stringify(data))来实现一个简单的深拷贝。