概述

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

JSON.parse()相关推荐

  1. JSON.parse解析特殊字符报错解决方案

    2019独角兽企业重金招聘Python工程师标准>>> 具体案例: 页面点击"下一任务" 会去请求后台,这里出现的问题是有虚拟任务的时候.然后会返回一个map,也 ...

  2. JSON.parse 函数应用 （复制备忘）

    JSON.parse 函数 JSON.parse 函数 (JavaScript) 将 JavaScript 对象表示法 (JSON) 字符串转换为对象. 语法 JSON.parse(text [, r ...

  3. php json.parse,PHP JSON头导致JSON.parse出错（使用jQuery）

    我正在从PHP文件中获取一些JavaScript格式的JSON数据. 要使用这些数据,我使用JSON.parse(json_response),除了在PHP中使用JSON头之外,它都可以工作:head ...

  4. json.parse()和json.stringify()

    json.parse() 用于从一个字符串解析出json对象 var str = '{"name":"huangzhong","age":& ...

  5. JSONObject JSONArray各种用法以及js eval()函数与JSON.parse的区

    2019独角兽企业重金招聘Python工程师标准>>> 一.在后台使用JSONObject对象,并将从数据库中取出来的数据直接使用 JSONObject的put方法放进去,再将这个J ...

  6. JSON.parse()出错解决

    在做微信小程序时遇到的问题,记录一下. 需求: 将购物车页面的商品信息通过url传到确认订单页 复制代码 购物车页面处理过程: 在购物车页面,处理商品信息组装成如下形式: goodsInfoArr = ...

  7. 【前端】JSON.stringfy 和 JSON.parse（待续）

    JSON.stringfy 和 JSON.parse(待续) 支持全局对象JSON的浏览器有:IE8+, FireFox3.5+, Safari4+, Chrome, Opera10.5+ JSON. ...

  8. 理解JSON对象：JSON.parse、 JSON.stringify

    何时是JSON,何时不是JSON? JSON就是一个有特殊规则的字符串,按照这个规则我们就可以把这个字符串解析成JS对象. JSON是设计成描述数据交换格式的,他也有自己的语法,这个语法是JavaSc ...

  9. JSON.parse()和eval()的区别

    json格式非常受欢迎,而解析json的方式通常用JSON.parse()但是eval()方法也可以解析,这两者之间有什么区别呢? JSON.parse()之可以解析json格式的数据,并且会对要解析 ...

  10. JSON.stringify()和JSON.parse()分别是什么

    JSON.stringify() 从一个对象中解析出字符串 JSON.stringify({"a":"1","b":"2" ...

最新文章

  1. 神经架构搜索在视频理解中研究进展的综述
  2. 贪心 ---- E. Maximum Subsequence Value[位运算]
  3. 2021湖南高考艺考成绩查询,2021届湖南艺考生联考成绩查询时间安排
  4. ux的重要性_颜色在UX中的重要性
  5. python基础学习笔记（十二）
  6. NS2 分裂机制及代码分析一
  7. 数据结构课设：仓库管理系统（C++）
  8. 蓝牙Sig Mesh 概念入门③——分层结构Layered architecture
  9. ARGB颜色与int相互转换
  10. spring boot V部落 V人事项目
  11. 永久免费的抠图软件分享
  12. 哥德尔预言无穷小微积分是未来的数学分析
  13. 丁鹿学堂：前端http面试总结，状态码详解
  14. 织梦手机站生成html,织梦手机端静态页面生成教程
  15. (一)MATLAB规划
  16. 电大实训平台计算机专业考核答题,新疆电大计算机信息管理专业集中实践环节实施细则201109...
  17. RKMPP库快速上手--（四）MPP编码入门
  18. buck电路 dac stm32_基于STM32F334双向同步整流BUCK-BOOST数字电源设计
  19. 腾讯御安全加固保护简单分析
  20. 关于优课达课程的git问题

热门文章

  1. 2002下一个回文年_2002年美国数学竞赛amc8
  2. python ndarray find_在列表中查找numpy数组的索引(Find index of numpy array in list)
  3. 生成20以内加减法代码
  4. ArcGIS 导入ArcPY脚本，要用cp936编码
  5. 数学，原理，方法，技巧
  6. [案例3-4]学生投票系统
  7. 现在很多的企业都有自己的线上商城，那该怎么运营企业自己的线上商城呢？
  8. Exceotion 异常
  9. Vue项目：路由跳转时中文传参被URL编码，怎么解决？用js封装Base64编码解码加密解密
  10. 梯度爆炸（Exploding Gradients）