JSON.stringify()与JSON.parse()的用法

Posted on

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”两个属性。

1
2
3
4
5
6
var json = {
    "name": "Bob",
    "age": 19,
    "job": "student"
}
var result = JSON.stringify(json, ["name", "age"]);

2 过滤器是函数（replacer）

  函数要接收两个参数，属性（键）名和属性值。根据属性（键）名可以知道应该如何处理要序列化的对象中的属性。属性名只能是字符串，如果值不是键值对儿结构的值时，键名可以是空字符串。

1
2
3
4
5
6
7
8
var json = {
 "name": "Bob",
 "age": 19,
 "job": "student"
}
var result = JSON.stringify(json, function(key, value){
    //do something；
});

1.3 字符串缩进

  第三个参数是一个选项，表示是否在JSON字符串中保留缩进，用于控制结果中的缩进和空白符。

1.3.1 参数是数字

  如果是数字的话，表示的是每个级别缩进的空格数。

如下所示，第三个参数是4，表明每一行缩进4个空格。

1
2
3
4
5
6
var json = {
 "name": "Bob",
 "age": 19,
 "job": "student"
}
var result = JSON.stringify(json, null, 4);

  最大空格数是10，所有大于10的都会自动转换为10.

1.3.2 参数是字符串

  如果缩进参数是字符串，则这个字符串在JSON字符串中被用作缩进字符（代替空格）。常将缩进字符设置为制表符，或者两个短划线之类的任意字符。

1
var result = JSON.stringify(json, null, '- -');

  缩进字符串不能超过10个字符长。如果字符串超过了10个，结果中将只出现10个字符。

1.4 使用场景

1.4.1 格式化对象

  格式化一些复杂的对象，这些对象往往对象内嵌套对象，直接看起来并不直观。

1.4.2 AJAX请求中序列化传值

  在使用AJAX的POST方法向服务器传值时，使用JSON.stringify()进行参数的序列化。

1.4.3 判断数组是否包含某对象，或判断对象是否相等

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//判断数组是否包含某对象
let data = [
    {name:'June'},
    {name:'Bob'},
    {name:'Susan'},
    ],
    val = {name:'Susan'};
JSON.stringify(data).indexOf(JSON.stringify(val)) !== -1;//true
//判断两数组/对象是否相等
let a = [1,2,3],
    b = [1,2,3];
JSON.stringify(a) === JSON.stringify(b);//true

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对象的数据格式的话，需要注意的是被转化的字符串里面的属性要使用引号，并且总体是单引号套双引号的方式。否则会报错。

1
2
3
4
5
6
7
8
9
10
11
//正确写法
var str = '{"name":"悟空","age":18}';
//会报错
var str = "{'name':'小明', 'age':18}";
//会报错
JSON.parse("[1, 2, 3, 4, ]");
JSON.parse('{"foo" : 1, }');

2.2 还原函数（reviver）

  JSON.parse()还可以接收另外一个参数，该参数是一个函数，接收两个参数，属性（键）名和属性值，将在每个键值对上调用。称为还原函数。

  • 如果还原函数返回undefined，则表示从结果中删除相应的键。

  • 如果返回其他值，则将该值插入到结果中。

1
2
3
4
var result = JSON.parse(jsonText, function(key, value){
    //do something
    return ;
})

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))来实现一个简单的深拷贝。

Miss Me wechat
light