阅读 28

详说JSON.stringify()与JSON.parse()

一、JSON

JSON是一个轻量级的数据格式,可以简化表示复杂数据结构的工作量,它不支持变量、函数或者对象实例,JSON字符串必须使用双引号(单引号会导致语法错误);在手工编写JSON时,JSON对象中的属性名任何时候都必须加双引号。JSON是ECMAScript5定义的对象,有两个方法:SON.stringify()和JSON.parse()。

二、JSON.stringify()

  • 功能:把JavaScript对象序列化为JSON字符串

  • 语法:JSON.stringify(value[, replacer [, space]])

    • value:将要序列化为JSON字符串的值
    • replacer:可选|过滤器参数。(参数可能为数组,函数或null)
      • 数组:只有包含在这个数组中的属性名,才会显示;
      • 函数:传入的函数接收两个参数,属性名和属性值;
      • 没有提供/null:则不过滤,属性全部显示;
  • space:可选|控制结果中的缩进和空白符。用于美化输出。(参数可能为数字、字符串、没有提供或为null)

    • 数字:上线为10,大于10则转换为10,小于1则没有空格;字符串:
    • 字符串长度最长不超过10个,大于10则取前10,替代空格显示;
    • 没有提供/null:没有空格;

    例子:

使用JSON.stringify()

 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}"复制代码
复制代码

replacer参数为函数

 function    replacer(key, value) {
 if (typeof value === "string") {
   return undefined;
   }
    return value;
    }

var foo = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7};
  JSON.stringify(foo, replacer);
复制代码

replacer参数为数组

var obj = {"age": 19, "name": "千钧", "functionName": "test", "address": "china"}; JSON.stringify(obj, ['age', 'name']); // "{"age":19,"name":"千钧"}"

space参数

 var obj = {"age": 19, "name": "千钧", "functionName":    "test", "address": "china"};
    JSON.stringify(obj, null, 2)
复制代码

执行结果如下所示:

三、JSON.parse()

  • 功能:把JSON字符串解析为原生JavaScript对象
  • 语法:JSON.parse(text[, reviver])
    • text:要被解析为JavaScript对象的字符串
    • reviver:可选|函数,将在每个键值对上调用,用来修改解析生成的原始值,在parse返回之前调用。

**注意:**若传入的字符串不符合 JSON 规范,则会抛出 SyntaxError 异常。

例子:

使用JSON.parse()

JSON.parse('{}');              // {}
JSON.parse('true');            // true
JSON.parse('"foo"');           // "foo"
JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
JSON.parse('null');            // null
复制代码

使用reviver函数

JSON.parse('{"p": 5}', function (k, v) {
if(k === '') return v;     // 如果到了最顶层,则直接返回属性值,
return v * 2;              // 否则将属性值变为原来的 2 倍。
});   
复制代码

JSON.parse()不允许对解析的原JavaScript对象出现以逗号结尾

JSON.parse('[1,3,4,]')
JSON.parse('{a:1,}')
复制代码

报错如下:

四、兼容性

通过www.caniuse.com/网站可以查看JSON.stringify()和JSON.parse()的浏览器支持的兼容性;

JSON.stringify()的兼容性

JSON.parse()的兼容性