JSON(一)初涉

欢迎进入本次“深挖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其它形式的表现。

以例子说明：

// (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的用法

猜你喜欢