JSON.parse() 全面用法介绍

港控/mmm° 2024-03-16 21:04 57阅读 0赞

JSON 通常用于与服务端交换数据。在接收服务器数据时一般是字符串。我们可以使用 **JSON.parse()** 方法将数据转换为 JavaScript 对象。

### 语法 ###

> JSON.parse(text\[, reviver\])

**text**:必需， 一个有效的 JSON 字符串。  
**reviver:** 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。如果是一个函数，则规定了原始值如何被解析改造，在被返回之前。  
如果从服务端接收的是数组的 JSON 数据，则 JSON.parse 会将其转换为 JavaScript 数组：

#### 例如： ####

> myArr = JSON.parse(this.responseText);  
> document.getElementById(“demo”).innerHTML = myArr\[1\];

如果从服务端接收的是 JSON 对象，则 JSON.parse 会将其转换为 JavaScript 对象：

> myObj = JSON.parse(this.responseText);  
> document.getElementById(“demo”).innerHTML = myObj.name;  
> 使用 JSON.parse()  
> JSON.parse(‘\{\}’); // \{\}  
> JSON.parse(‘true’); // true  
> JSON.parse(‘“foo”’); // “foo”  
> JSON.parse(‘\[1, 5, “false”\]’); // \[1, 5, “false”\]  
> JSON.parse(‘null’); // null  
> JSON.parse(‘1’); // 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; // 否则将属性值变为原来的 2 倍。  
> \}); // \{ p: 10 \}

> 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  
> // “”

### 注意事项： ###

**JSON.parse() 不允许用逗号作为结尾，否则会报语法错误。**  
![在这里插入图片描述][3875f18176e74cd6a34ee1f992ac26d1.png_pic_center]  
代码：

> JSON.parse(“\[1, 2, 3, 4, \]”);  
> JSON.parse(‘\{“foo” : 1, \}’);

[3875f18176e74cd6a34ee1f992ac26d1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/9f87bb8dd87048a8aa23d11975a41db7.png