外观风格
JSON Javascript API
JSON 常用于客户端与服务器进行数据交换，而客户端接收到服务器传送过来的 JSON 数据一般是字符串。
字符串的数据无法直接操作，这时候我们需要将数据转换为 Javascript 对象。
JSON.parse()
使用 JSON.parse() 方法将 JSON 字符串转换为 JavaScript 对象。
语法
JSON.parse(text[, reviver])
1
参数说明
- text：必需参数。要被解析成 JavaScript 值的字符串。
- reviver：可选参数。一个转换结果的函数， 将为对象的每个成员调用此函数。
使用示例
- 解析服务端接口返回的响应数据
{
"data": "生产测试",
"code": "200",
"msg": "OK"
}
1
2
3
4
5
2
3
4
5
使用 JSON.parse() 解析上面的数据。
const obj = JSON.parse('{ "data": "生成测试", "code": "200", "msg": "OK" }');
// 解析完成后就可以使用 JSON 数据了
console.log(obj.data) // 输出 生成测试
1
2
3
2
3
- 解析浏览器缓存
localStorage/sessionStorage 中是以 JSON 字符串存储的，在使用前需要解析。
const data = JSON.parse(localStorage.getItem('data'))
const session = JSON.parse(sessionStorage.getItem('session'))
1
2
2
- 其他类型的解析
JSON.parse('{}'); // {}
JSON.parse('true'); // true
JSON.parse('"foo"'); // "foo"
JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
JSON.parse('null'); // null
1
2
3
4
5
2
3
4
5
JSON.parse() 不允许用逗号作为结尾，否则会抛出 SyntaxError 异常。
// 抛出 SyntaxError 异常
JSON.parse("[1, 2, 3, 4, ]");
JSON.parse('{"foo" : 1, }');
1
2
3
2
3
解析前要确保数据是标准的 JSON 格式，否则也会解析出错。
JSON.stringify()
使用 JSON.stringify() 方法将 JavaScript 对象转换为 JSON 字符串。
语法
JSON.stringify(value[, replacer[, space]])
1
参数说明
- value：必需参数。将要序列化成 一个 JSON 字符串的值。
- replacer：可选参数。用于转换结果的函数或数组。 如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；如果该参数为 null 或者未提供，则对象所有的属性都会被序列化。
- space：可选参数。指定缩进用的空白字符串，用于美化输出（pretty-print）；如果参数是个数字，它代表有多少的空格；上限为 10。该值若小于 1，则意味着没有空格；如果该参数为字符串（当字符串长度超过 10 个字母，取其前 10 个字母），该字符串将被作为空格；如果该参数没有提供（或者为 null），将没有空格。
使用示例
- 浏览器缓存存储
当我们要将下面的数据存入浏览器缓存（localStorage/sessionStorage）中时，需要使用 JSON.stringify() 。
const data = { name: 'devcursor', feature: ['good'] }
localStorage.setItem('data', JSON.stringify(data))
// 或者
sessionStorage.setItem('data', JSON.stringify(data))
1
2
3
4
2
3
4
- 其他类型的序列化
JSON.stringify({}); // '{}'
JSON.stringify(true); // 'true'
JSON.stringify("foo"); // '"foo"'
JSON.stringify([1, "false", false]); // '[1,"false",false]'
JSON.stringify({ x: 5 }); // '{"x":5}'
JSON.stringify({x: 5, y: 6});
// "{"x":5,"y":6}"
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
- space 参数使用
JSON.stringify({ a: 2 }, null, " "); // '{\n "a": 2\n}'
JSON.stringify({ uno: 1, dos : 2 }, null, '\t')
// '{ \
// "uno": 1, \
// "dos": 2 \
// }'
1
2
3
4
5
6
2
3
4
5
6