三分钟学JSON：JSON.parse引发的惨案三分钟学JSON：JSON.parse引发的惨案前言今天上班一大

前言

今天上班一大早，部门经理就气势汹汹得找到我，昨天刚联调完的页面，接口还是好好的，今天怎么就没数据了。我当时一惊，打开浏览器，看到控制台的SyntaxError 异常 JSON.parse失败，也是一脸懵逼，咱代码也没错呀。

屏幕截图 2021-11-02 213500.png

后面经过一通bing搜索，终于在茫茫代码中找到了答案：JSON数据不规范。真的是后端不规范，前端两行泪啊。话说回来，这到底什么样的JSON才算规范呢？我还是补补基础吧~~

一、什么是JSON

首先，来说说JSON是什么？JSON全称 JavaScript Object Notation，JavaScript对象表示法。顾明思意，肯定跟JavaScript相关，没错，它是基于JavaScript的一个子集(但不是严格意义上的子集)，因此完美支持的JS的各种类型。但它不是一种新的编程语言，仅用来描述数据结构，常用于前后端的数据交互。它常以key：value的键值对形式出现，例如 {"name":"kaka"}。

二、JSON语法规则

在JSON中，值必须是以下的类型：

字符串（必须使用双引号，字符中间不加双引号，不能单独出现双引号和右斜杠"\"必须加斜杠转移,如"\\" ）
```
"hello" //正确
'hello' // error
"hello \"kaka\"" //正确
```
数字
对象（JSON对象）key属性名必须使用双引号
数组
布尔
Null

不能是以下的类型：

数值不能是NaN、Infinity
undefined（JavaScript中的undefined不能使用）
0x1(数字必须为十进制)
函数
日期（Date格式）

同时对于数组和对象，JSON最后一个元素后面一定不能有逗号。

三、JSON.parse与stringfy

首先，我们先了解两个概念，JSON字符串与JSON对象。对于JSON字符串，它与普通的JavaScript没什么特别区分。它可以由JSON对象反序列化而成。而JSON对象则正好相反，它可以由JSON字符串序列化成。

// JSON字符串
let str = '{"a":1,"b":2}'
typeof(str) // string

// JSON对象
let obj ={
	"a":1,
	"b":2
}
typeof(obj) //object

JSON.stringfy

let obj ={
	"a":1,
	"b":2
}
JSON.stringify(obj) // '{"a":1,"b":2}' 当JSON符合规范时，正常被反序列化

//当值不规范时？
let obj1 ={
	"a":NaN,
	"b":undefined
}
JSON.stringify(obj1) //'{"a":null}' 可以看出它将无法识别的值转换为null，同时跳过了undefined

// ex2
let obj2 ={
	"a":0xF2,
	"b":function(){}
}
JSON.stringify(obj2) // '{"a":242}' 可以看出 这边也跳过了无法识别的函数，但不是说无法识别非十进制的数字？这边却自动转换成十进制 非十进制的在JSON.parse序列化时报错，在JSON.stringify中自动转换。

//API语法

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

stringify除了接收第一个必填参数外，它还可以接收replacer函数替换、space指定缩进两个可选参数。下面讲解下这两个参数的用法：

replacer 该参数又分为两种情况：
1. 函数：在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理
2. 数组：只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；如果该参数为 null 或者未提供，则对象所有的属性都会被序列化
space 指定缩进用的空白字符串，用于美化输出

特别的：转换值如果有 toJSON() 方法，该方法定义什么值将被序列化

Example：

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

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

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

JSON.stringify(foo, ['week', 'month']);
// '{"week":45,"month":7}', 只保留 “week” 和 “month” 属性值。

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

JSON.parse

let str = '{"a":1,"b":2}' 
JSON.parse(str) // {"a":1,"b":2} 正常情况

//当值不规范时？
var c='{"a":0xF2}' //使用非十进制数值
var c='{"a":undefined}' //使用了undefined
var c='{"a":function(){}}' //使用了函数
var c='{"a":"\lab"}' //使用了单斜杠
以上都提出解析错误：
Uncaught SyntaxError: Unexpected token l in JSON at position 
    at JSON.parse (<anonymous>)
    at <anonymous>:1:6

但JSON.parse不只能序列化JSON字符，它还能接受第二个参数reviver 函数，可以修改解析生成的原始值，调用时机在parse函数返回时。

Example：

//这边使用MDN的例子

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

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

// 1
// 2
// 4 
// 6 注意 从这里开始由内往外
// 5
// 3
// ""

总结来说：如果使用了reviver 函数，对于嵌套多层，它解析值从最最里层的属性开始，一级级往外，最终到达顶层，也就是解析值本身，当遍历到最顶层的值（解析值）时，当前的 this 值会是 {"": 修改过的解析值}，最顶层的key 为“”空字符串，值为对象值本身全部。