JSON 全家桶

  JSON 对象包含两个方法：用于解析JavaScript Object Notation 即 JSON的parse() 方法，以及将对象 / 值转换为 JSON 字符串的 stringify() 方法。除此之外，JSON这个对象本身不具备其他作用，不能被条用或者作为构造函数调用

 

$ 什么是JSON ?

  JSON： JS 对象简谱，用来序列化对象，数组，数值，字符串，布尔值和null，是一种语法，一种轻量级的数据交换格式。它基于JavaScript但又不同于JavaScript，并不是严格意义上JavaScript的子集.
 

$ JSON 注意点

1. 属性名称必须是双引号括起来的字符串；最后一个属性后不能有逗号。
2. 禁止出现前导零（ JSON.stringify 方法自动忽略前导零，而在 JSON.parse 方法中将会抛出 SyntaxError）；如果有小数点, 则后面至少跟着一位数字。
3. 只有有限的一些字符可能会被转义；禁止某些控制字符； Unicode 行分隔符 U+2028和段分隔符 U+2029被允许 ; 字符串必须用双引号括起来。请参考下面的示例，可以看到 JSON.parse() 能够正常解析，但将其当作JavaScript解析时会抛出SyntaxErro 错误
    

$ JSON 方法

  JSON包含JSON.parse() 和 JSON.stringify()

（1）JSON.parse()方法

  解析JSON字符串并返回对应的值，可以额外传入一个转换函数，用来将生成的值和其属性, 在返回之前进行某些修改。

> 语法

JSON.parse(text[, reviver])

参数： text：要被解析成JavaScript值的字符串；
    reviver ：【可选】如果是一个函数，这规定了原始值在被放回之前如何被解析改造

> 返回值

  对应给定的JSON文本

> 示例:   对象，数组，数值，字符串，布尔值和null

JSON.parse('{}');    //  Object  {}
JSON.parse('true');    // Boolean  true
JSON.parse('"foo"');    // String   "foo"
JSON.parse('[1, 5, "false"]');   // [1, 5, "false"]
JSON.parse('null');    // null
JSON.parse('1');    // Number  1

> 使用reviver函数

  如果指定了reviver函数，则解析出的 JavaScript 值（解析值）会经过一次转换后才将被最终返，也就是说：解析值本身以及它所包含的所有属性，会按照一定的顺序（从最最里层的属性开始，一级级往外，最终到达顶层，也就是解析值本身）分别的去调用 reviver 函数，在调用过程中，当前属性所属的对象会作为 this 值，当前属性名和属性值会分别作为第一个和第二个参数传入 reviver 中。如果 reviver 返回 undefined，则当前属性会从所属对象中删除，如果返回了其他值，则返回的值会成为当前属性新的属性值。

  当遍历到最顶层的值（解析值）时，传入 reviver 函数的参数会是空字符串 ""（因为此时已经没有真正的属性）和当前的解析值（有可能已经被修改过了），当前的 this 值会是 {"": 修改过的解析值}，在编写 reviver 函数时，要注意到这个特例。（这个函数的遍历顺序依照：从最内层开始，按照层级顺序，依次向外遍历）

JSON.parse('"p": 5', function(k, v) {
    if (k === '') {
        return v;    // 如果遍历到了最顶层，则直接返回属性值，
    } 
    return v * 2;   // 遍历每个值执行函数规则
})

//  { p: 10 }

JSON.parse('{"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}', function (k, v) {
    console.log(k);   //  输出当前的属性名，从而得知遍历顺序是从内向外的，
                      //  最后一个属性名会是个空字符串。
    return v;         //  返回原始属性值，相当于没有传递 reviver 参数。
});

> 异常案例

  不允许用逗号作为结尾

// both throw a SyntaxError
JSON.parse("[1, 2, 3, 4, ]"); 
JSON.parse('{"foo" : 1, }');

 

（2）JSON.stringify()方法

  JSON.stringify()方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串，如果指定了replacer是一个函数，则可以替换值，或者如果指定了replacer是一个数组，可选的仅包括指定的属性

> 语法

JSON.stringify(value[, replacer [, space])

参数： value：将要序列化成 一个JSON 字符串的值；

    replacer ：【可选】
  (1). 如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；
  (2). 如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；
  (3). 如果该参数为null或者未提供，则对象所有的属性都会被序列化；

    space ：【可选】指定缩进用的空白字符串，用于美化输出.
  (1). 如果参数是个数字，它代表有多少的空格；上限为10。该值若小于1，则意味着没有空格；
  (2). 如果该参数为字符串(字符串的前十个字母)，该字符串将被作为空格；
  (2). 如果该参数没有提供（或者为null）将没有空格.

> 返回值

  一个表示给定值的JSON字符串。

> 注意点：

1. 非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串中。
2. 布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。
3. undefined、任意的函数以及 symbol 值，在序列化过程中会被忽略（出现在非数组对象的属性值中时）或者被转换成 null（出现在数组中时）。
4. 对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。
5. 所有以 symbol 为属性键的属性都会被完全忽略掉，即便replacer参数中强制指定包含了它们。
6. 不可枚举的属性会被忽略

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参数

(1). replacer参数参数为函数（function）

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

var foo = {model: "box", week: 45, transport: "car", month: 7};
var jsonString = JSON.stringify(foo, replacer);

// {"week":45, "month":7}

(2). 如果replacer是一个数组，数组的值代表将被序列化成JSON字符串的属性名。

var foo = {model: "box", week: 45, transport: "car", month: 7};
JSON.stringify(foo, ['week', 'month']);  

// '{"week":45,"month":7}', 只保留“week”和“month”属性值。

> toJSON方法

  如果一个被序列化的对象拥有 toJSON 方法，那么该 toJSON 方法就会覆盖该对象默认的序列化行为. 这个覆盖不改变原数据，只改变序列化之后的数据

var obj = {
  foo: 'foo',
  toJSON: function () {
    return 'bar';
  }
};
JSON.stringify(obj);        // '"bar"'
JSON.stringify({x: obj});   // '{"x":"bar"}'

 

$ JSON 在 localStorage中的使用

  一些时候，你想存储用户创建的一个对象，并且，即使在浏览器被关闭后仍能恢复该对象。

// 创建一个示例数据
var session = {
    'screens' : [],
    'state' : true
};
session.screens.push({"name":"screenA", "width":450, "height":250});
session.screens.push({"name":"screenB", "width":650, "height":350});
session.screens.push({"name":"screenC", "width":750, "height":120});
// 使用 JSON.stringify 转换为 JSON 字符串
localStorage.setItem('session', JSON.stringify(session));

// 然后通过JSON.parse()取数据
var restoredSession = JSON.parse(localStorage.getItem('session'));

 

$ Date.prototype.toJSON()

  toJSON() 方法返回Date对象的字符串形式。

var event = new Date('August 19, 1975 23:15:30 UTC');

var jsonDate = event.toJSON();

console.log(jsonDate);
// expected output: 1975-08-19T23:15:30.000Z

console.log(new Date(jsonDate).toUTCString());
// expected output: Tue, 19 Aug 1975 23:15:30 GMT