JSON.parse​

概述
JSON.parse() 方法解析一个JSON字符串，构造由字符串描述的JavaScript值或对象。可以提供可选的reviver函数以在返回之前对所得到的对象执行变换。

语法

JSON.parse(text[, reviver])
text[, reviver])
参数
text

要被解析成JavaScript值的字符串，查看 JSON 对象学习的JSON 语法的说明。

• reviver 可选

如果是一个函数，则规定了原始值如何被解析改造，在被返回之前。

• 返回值
  Object对应给定的JSON文本。

• 异常
  若被解析的 JSON 字符串是非法的，则会抛出 一个语法错误 异常。

• 示例

使用 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 函数

如果指定了 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() 不允许用逗号作为结尾
// both will throw a SyntaxError
JSON.parse("[1, 2, 3, 4, ]");
JSON.parse('{"foo" : 1, }');

JSON 通常用于与服务端交换数据。

在接收服务器数据时一般是字符串。

我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

语法

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

参数说明：

text:必需， 一个有效的 JSON 字符串。
reviver: 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。
JSON 解析实例
例如我们从服务器接收了以下数据：

{"name":"runoob","alexa":10000,"site":"www.runoob.com"}
我们使用 JSON.parse() 方法处理以上数据，将其转换为 JavaScript 对象：

varobj =JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');
解析完成后，我们就可以在网页上使用 JSON 数据了：
<pid="demo"></p>
<script>
var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');
document.getElementById("demo").innerHTML = obj.name + "：" + obj.site;
</script>
从服务端接收 JSON 数据
我们可以使用 AJAX 从服务器请求 JSON 数据，并解析为 JavaScript 对象。

varxmlhttp = newXMLHttpRequest();xmlhttp.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
myObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myObj.name;
}};
xmlhttp.open("GET","/try/ajax/json_demo.txt",true);
xmlhttp.send();

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

varxmlhttp = newXMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
myArr = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myArr[1];
}};
xmlhttp.open("GET","/try/ajax/json_demo_array.txt",true);
xmlhttp.send();

异常
解析数据
JSON 不能存储 Date 对象。

如果你需要存储 Date 对象，需要将其转换为字符串。

之后再将字符串转换为 Date 对象。

vartext = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';
varobj = JSON.parse(text);obj.initDate = newDate(obj.initDate);
document.getElementById("demo").innerHTML = obj.name + "创建日期:" + obj.initDate;
我们可以启用 JSON.parse 的第二个参数 reviver，一个转换结果的函数，对象的每个成员调用此函数。
var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';
var obj = JSON.parse(text, function (key, value) {
    if (key == "initDate") {
        return new Date(value);
    } else {
        return value;
}});
 
document.getElementById("demo").innerHTML = obj.name + "创建日期：" + obj.initDate;

输出 Runoob创建日期: Sat Dec 14 2013 08:00:00 GMT+0800 (中国标准时间)
var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';
var obj = JSON.parse(text, function (key, value) {
    // if (key == "initDate") {
    //     return new Date(value);
    // } else {
        return value;
    //}
});
 
document.getElementById("demo").innerHTML = obj.name + "创建日期：" + obj.initDate;

输出Runoob创建日期：2013-12-14
解析函数
JSON 不允许包含函数，但你可以将函数作为字符串存储，之后再将字符串转换为函数。

vartext = '{ "name":"Runoob", "alexa":"function () {return 10000;}", "site":"www.runoob.com"}';
varobj = JSON.parse(text);obj.alexa = eval("(" + obj.alexa + ")");
document.getElementById("demo").innerHTML = obj.name + " Alexa 排名：" + obj.alexa();

json.parse error

// 字符串内部应为双引号
JSON.parse("['123']")
VM173:1 Uncaught SyntaxError: Unexpected token ' in JSON at position 1
    at JSON.parse (<anonymous>)
  // ✅ 正确写法
JSON.parse('["123"]')

mdn json.parse