欢迎进入本次“深挖JSON之旅”,下文将从以下几个方面去理解JSON:
(1)首先是对“JSON是一种轻量的数据交换格式”的理解;
(2)然后来看经常被混为一谈的JSON和JS对象的区别;
(3)最后我们再来看JS中这几个JSON相关函数具体的执行细节。
希望全文能让如之前的我一样对JSON一知半解的亲能说清楚JSON是什么,也能熟练运用JSON,不看控制台就知道JS对象序列化成JSON字符串后输出是啥。
一、JSON初涉
特点:JSON是一种格式,基于文本,优于轻量,用于交换数据
1. 一种数据格式
问题:什么是格式?
思考:约定俗成的,大家都能看懂(当然也得遵循),深层的就是规范(数据是怎么表示的)
迁移:公司的规章制度,不懂(潜)规则的人很难生存。
举例:有个人叫"小王",身高"160",体重"60kg",现在你要将这个人的这些信息传给别人,怎么传递?
方式1:姓名“小王”,身高“160cm”,体重“60kg”;
方式2:name="小王"&height="160cm"&weight="60kg";
方式3:小王16060;
方式4:{"name":"小王","height":160,"weight":60};
说明:以上传递的数据是一样的,但是形式各异,这就是各种不同格式化后的数据,JSON只是其中一种表示方式。
2. 基于文本的数据格式
JSON是基于文本的数据格式,相对于基于二进制的数据(序列化流),所以JSON在传递的时候是传递符合JSON这种格式的字符串,我们常会称为“JSON字符串”。
3. 轻量级的数据格式(对比)
问题:轻在哪?
说明:在JSON之前,有一个数据格式叫xml,现在还是广泛在用,但是JSON更加轻量,如xml需要用到很多标签(冗余), xml格式的数据中标签本身占据了很多空间,而JSON比较轻量,即相同数据,以JSON的格式占据的带宽更小,这在有大量数据请求和传递的情况下是有明显优势的。
4. 被广泛地用于数据交换
轻量已经是一个用于数据交换的优势了,但更重要的JSON是易于阅读、编写、机器解析的,即JSON对人和机器都是友好的,而
且又轻,独立于语言(基于文本的--跨平台),所以JSON被广泛用于数据交换。
举例:以前端JS进行ajax的POST请求为例,后端PHP处理请求为例
(1)前端构造一个JS对象,用于包装要传递的数据,然后将JS对象转化为JSON字符串,再发送请求到后端;
(2)后端PHP接收到这个JSON字符串,将JSON字符串转化为PHP对象,然后处理请求。
分析:可以看到,相同的数据在这里有3种不同的表现形式,分别是前端的JS对象、传输的JSON字符串、后端的PHP对象,JS对象和PHP对象明显不是一个东西,但是由于大家用的都是JSON来传递数据,大家都能理解这种数据格式,都能把JSON这种数据格式很容易地转化为自己能理解的数据结构,这就方便啦,在其它各种语言环境中交换数据都是如此。
二、JSON和JS对象之间的“八卦”
认知:JSON是JS的一个子集,即每个符合JSON格式的字符串都能被解析成js。思考下面的问题
问题1: 两个本质不同的东西为什么那么密切?
思考:JSON和JS对象本质上完全不是同一个东西,就像“斑马线”和“斑马”,“斑马线”基于“斑马”身上的条纹来呈现和命名,但是斑马是活的,斑马线是非生物。同样,"JSON"全名"JavaScript Object Notation",它的格式(语法)是基于JS的,但它就是一种格式,而JS对象是一个实例,是存在于内存的一个东西。此外,JSON是可以传输的,因为它是文本格式,但是JS对象是没办法传输的,在语法上JSON也会更加严格,但是JS对象就很松了。
那么两个不同的东西为什么那么密切?因为JSON毕竟是从JS中演变出来的,语法相近。
2. JSON格式比JS对象语法表现上严格在哪?
先就以“键值对为表现的对象”形式上,对比下两者的不同,后续说明JSON其它形式的表现。
![](https://i-blog.csdnimg.cn/blog_migrate/b7a4b594f116a9413c9ee9750366c1ec.png)
以例子说明:
// (1)这只是 JS 对象
var obj1 = {};
// (2)可把这个称做:JSON 格式的JavaScript对象
var obj2 = {"width":100,"height":200,"name":"rose"};
// (3)可把这个称做:JSON 格式的字符串
var str1 = '{"width":100,"height":200,"name":"rose"}';
// (4)这个可叫 JSON 格式的数组,是 JSON 的稍复杂一点的形式
var arr = [
{"width":100,"height":200,"name":"rose"},
{"width":100,"height":200,"name":"rose"},
{"width":100,"height":200,"name":"rose"},
];
// (5)这个可叫稍复杂一点的JSON 格式的字符串
var str2='['+
'{"width":100,"height":200,"name":"rose"},'+
'{"width":100,"height":200,"name":"rose"},'+
'{"width":100,"height":200,"name":"rose"},'+
']';
说明:除了常见的“标准”JSON格式,要么表现为一个对象形式 {...},要么表现为一个数组形式 [...];任何单独的一个10进制数值、双引号字符串、布尔值和null都是有效符合JSON格式的。
补充
标准的JSON数组
var result=[{"flag":1,"macId":"2","mbId":0,"userName":"XXX"},{"flag":1,"macId":"1","mbId":1,"userName":"YYY"}];
非标准的JSON数组(对象)
var result={"datas":[{"flag":1,"macId":"2","mbId":0,"userName":"XXX"},{"flag":1,"macId":"1","mbId":1,"userName":"YYY"}]};
相关链接:点击打开链接(json数组的嵌套),点击打开链接(JSON数组动态赋值),随后补充其它的例子。
3. JSON不是JS的子集(了解即可)
首先看下面的代码,你可以copy到控制台执行下:
var code = '"\u2028\u2029"';
JSON.parse(code); // works fine
eval(code); // fails
说明:这两个字符 \u2028和 \u2029分别表示行分隔符和段落分隔符,JSON.parse可以正常解析,但是当做js解析时会报错。
三、JS中与JSON相关的函数
作用:用于JSON字符串和JS对象数据结构之间的转化
JSON.stringify:它很智能,智能到你写的不符合JSON格式的JS对象都能帮你处理成符合JSON格式的字符串,所以你得知道它到底干了什么,免得它只是自作聪明,然后让你Debug long time;
另一个叫 JSON.parse:用于转化json字符串到JS数据结构,它很严格,你的JSON字符串如果构造地不对,是没办法解析的。
四、JSON的规格
(1)并列的数据之间用逗号(",")分隔;
(2)映射用冒号(“:”)表示;
(3)并列数据的集合(数组)用方括号(“ [ ]“)表示;
(4)映射的集合(对象)用大括号(”{ }”)表示;
特点:这个规格永远不必升级(非常易学易用)。所以在短短几年中,它就取代xml,成为了互联网上最受欢迎的数据交换格式。
三、常规的JSON的用法
回顾:javascript中数组和对象(object)的联系和区别
概念:
对象:对象在 JS 中是使用花括号包裹 {} 起来的内容,数据结构为 {key1:value1, key2:value2, ...} 的键值对结构
数组:数组在 JS 中是方括号 [] 包裹起来的内容,数据结构为 ["java", "javascript", "vb", ...] 的索引结构
同:两者都可以用来表示数据的集合。
异1:数组表示有序数据的集合,而对象表示无序数据的集合。如果数据的顺序很重要,就用数组,否则就用对象
异2:数组的数据没有名称,对象的数据有名称(name)
补充:但是很多编程语言中,都有一种叫做"关联数组"(associative array)的东西,这种数组中的数据是有名称的。
理解:在Javascript语言中,关联数组就是对象,对象就是关联数组。
把握:在数据传输流程中,json是以文本(字符串)的形式传递的,而JS操作的是JSON对象。
所以,JSON对象和JSON字符串之间的 相互转换是关键--------------------------
解析方式:进行遍历之前得先解析出标准的json数组格式即[{},{}]
--------------------------
在JS中将JSON的字符串解析成JSON对象(JS)数据格式,一般有三种方式
<script type="text/javascript">
var str = '{ "name": "cxh", "sex": "man" }';//JSON字符串
// 需求:将字符串转化为JSON对象
// 方式1:var obj=JSON.parse(str);//已经内置了
// 方式2:var obj=str.parseJSON();//(老版本的,现在没有了)
// 方式3:var obj = eval('(' + str + ')');//已经内置了
alert(obj); //[object Object]--转化成功
</script>
平台:Hbuilder下,没有导包,都已经内置了。
</script>
<script type="text/javascript">
var str = '{ "name": "cxh", "sex": "man" }';//JSON字符串
var str2 = { "name": "cxh", "sex": "man" };//JSON对象
//(1)由JSON字符串转换为JSON对象
var obj = eval('(' + str + ')');// 系统的内置函数
//var obj = str.parseJSON(); //由JSON字符串转换为JSON对象(不起作用--版本原因)
//(2)转化为JSON对象后,进行读取(JSON对象特有的通过键值来获取值)
alert(obj.name);
alert(obj.sex);
//注意:如果str本来就是一个JSON对象,那么运用eval函数转换后(哪怕是多次转换)还是JSON对象,但是运用parseJSON函数处理后会有疑问(抛出语法异常)
</script>
将JSON(JS)对象解析成JSON字符串
<script type="text/javascript">
var str = '{ "name": "cxh", "sex": "man" }';//JSON字符串
var obj = { "name": "cxh", "sex": "man" };//JSON对象
//(1)将JSON对象转化为字符串
// var last=obj.toJSONString(); //将JSON对象转化为JSON字符(暂时使用不了:版本的原因)
var st=JSON.stringify(obj); //将JSON对象转化为JSON字符
alert(st);
</script>
注意:除了eval()函数是js自带的之外,其他的多个要领都来自json.js包。新版本的 JSON 修改了 API,将 JSON.stringify() 和 JSON.parse() 两个要领都注入到了Javascript 的内建对象里面,前者变成了 object.toJSONString(),而后者变成了 String.parseJSON()。如果提示找不到toJSONString()和parseJSON()函数,则说明您的json包版本太低。
JSON包的下载:点击打开链接
说明:
JSON.parse(jsonstr); //可以将JSON字符串反序列化成JSON对象;
JSON.stringify(jsonobj); //可以将JSON对象序列化成JSON对符串(序列化后可以以文本传输了)
四、高级JSON的用法
相关链接:点击打开链接
五、java中的用法
相关链接:点击打开链接(注意Jquery中的用法)
JSON字面量和JSON文本的理解