JSON.parse()

概述

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

语法

JSON.parse(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, }');

规范

规范名称	规范状态	备注
ECMAScript 5.1 (ECMA-262) JSON.parse	Standard	首次定义，于 JavaScript 1.7 版本中实现。
ECMAScript 2015 (6th Edition, ECMA-262) JSON.parse	Standard

浏览器兼容性

• Desktop 
• Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	(Yes)	3.5 (1.9.1)	8.0	10.5	4.0

JSON.parse()

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

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

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

语法

JSON.parse(text[, reviver])

参数说明：

• text:必需， 一个有效的 JSON 字符串。

• reviver: 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。

• JSON 解析实例

  例如我们从服务器接收了以下数据：

  { " name " : " runoob " , " alexa " : 10000 , " site " : " www.runoob.com " }

  我们使用 JSON.parse() 方法处理以上数据，将其转换为 JavaScript 对象：

  var obj = 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() 函数：

  • Firefox 3.5
  • Internet Explorer 8
  • Chrome
  • Opera 10
  • Safari 4