javaScript系列 [05]-javaScript和JSON

本文输出和JSON有关的如下内容
❐ JSON和javaScript
❐ JSON的语法介绍
❐ JSON的数据类型
❐ JSON和XMLHTTPRequest
❐ JSON的序列化和反序列化处理

1.1 JSON和javaScript

JSON是一种数据交换格式。

JSON的全称是JavaScript Object Notation，翻译为JavaScript对象表示法。JSON的这个全称，无疑让不少人既兴奋又困惑，兴奋的人直接认为这就是JavaScript中的对象，困惑的人觉察出JSON数据和JavaScript对象好像有些不同。接下来咱们先谈一谈JSON数据和JavaScript的关系。

诚然，从JSON的全称能够看出JSON和JavaScript语言一定有种某种神秘关联，至少可以肯定的是JSON的命名确实来源于JavaScript这门语言。

JSON基于JavaScript对象字面量，但JSON自己是一种数据交换格式，所以它是独立于语言的。JSON全称为JavaScript对象表示法，在理解的时候能够认为JSON ==> JavaScript && 对象 && 表示法

JavaScript咱们知道是一门动态脚本语言，那么对象表示法是什么？

对象是面向对象编程语言中一种常见的数据类型，表示键值对的集合，那么表示法是什么？

表示法:是指一个能够表示诸如数字或单词等数据的字符系统。

JSON起源于JavaScript（灵感来源于JavaScript的对象语法），但真正重要的是具体的表示法自己。JSON不只独立于语言，并且使用了一种在许多编程语言中可以找到共同元素的表达方式。基于这种简洁的表达方式，JSON迅速成为一种流行的数据交换格式。目前，客户端和服务器端在进行数据通讯的时候，常见的数据格式就是JSON和XML。

1.2 JSON的语法介绍

1.2.1 JSON的语法

JSON由于基于JavaScript的字面量，因此咱们先来看下JavaScript字面量的样子，下面给出简单的代码示例，描述了一个书对象。

1 var book = {
2 name:"声名狼藉者的生活",
3 price:42.00,
4 author:"福柯",
5 press:"北京大学出版社",
6 read:function () {
7 console.log("个人书名为:声名狼藉者的的生活,做者为福柯....");
8 }
9 };

顺便贴出一个简短的JSON数据

{
"name":"声名狼藉者的生活",
"price":42.00,
"author":"福柯",
"press":"北京大学出版社",
"content":["a","b","c",123]
}

咱们能够对比下上面的JavaScript对象和JSON数据，会发现它们的结构和语法形式很像，都是键值对的集合，接下来咱们作更详细的说明。JSON数据在表达上和对象保持一致，但由于数据交换格式的核心是数据，因此JSON并不会保存函数等信息。JSON数据所基于的JavaScript对象字面量单纯指对象字面量以及其属性的语法表示。

JSON的主要语法特色

① 以键值对的方式来保存数据
② 标准的JSON数据的key必需要使用双引号包裹
③ { } 用于表示和存放对象，[ ] 用于表示和存放数组数据

JSON数据的读取，在读取JSON的时候

{ 表示开始读取对象，} 表示对象读取结束
[ 表示开始读取数组，] 表示数组读取结束
：用于分隔键值对中的key和value
, 用于分隔对象中的多个键值对或者是数组中的多个元素

JavaScript对象字面量中的key可使用单引号，可使用双引号，能够没必要加上引号包裹，可是在JSON中，全部的key必需要加上双引号。

1.2.2 JSON的验证和格式化工具

下面列出一些可以对JSON数据进行校验和格式化的在线地址
https://jsonlint.com/
http://tool.oschina.net/codeformat/json
https://jsonformatter.curiousconcept.com/

1.2.3 JSON文件和MIME类型

在开发中咱们常常须要处理大量的JSON数据，JSON这种数据交换格式能够做为独立的文件存在于文件系统中，文件扩展名为 .json

JSON的MIME类型是application/json, 详细信息请参考IANA官网维护的全部媒体类型列表。

1.3 JSON的数据类型

JSON中（做为value值）的数据类型包括对象、字符串、数字、布尔值、null和数组六种。

① 字符串
JSON中的字符串能够由任何的Unicode字符构成，字符串的两边必须被双引号包裹。须要注意的是：虽然在JavaScript语言中字符串可使用单引号来包裹，可是在JSON中的字符串必须使用双引号包裹。

若是字符串中存在如下特殊字符，那么须要在它们的前面加上一个反斜线（\）来进行转义。

- " 双引号 - \ 反斜线 - \/ 正斜线 - \b 退格符 - \f 换页符 - \t 制表符 - \n 换行符 - \r 回车符 - \u 后面跟16进制字符

 

② 数字
JSON中的数字能够是整数、小数、负数或者是指数。

③ 布尔类型
JSON数据仅仅支持小写形式的布尔类型值：true 和 false。

④ null类型
JSON中没有undefined这种数据类型，它使用null表示空，而且必须小写。
在JavaScript语言中，var obj = null 表示把obj这个对象清空，它和undefined不太同样，null表示什么都没有，undefined表示未定义。

⑤ 对象类型
对象类型是使用逗号分隔的键值对的集合，使用大括号({})裹。

⑥ 数组类型
数组类型是元素的集合，每一个元素均可以是字符串、数字、布尔值、对象或者数组中的任何一种。元素与元素之间使用逗号隔开，全部的元素被方括号（[]）包裹，建议数组中全部的元素都应该是相同数据类型的。

1.4 JSON和XMLHTTPRequest

在前端开发中有一种发送网络请求的技术Ajax，它能够实现异步处理网络通讯而不刷新页面。

Ajax的全称为Asynchronous JavaScript and XML，即异步的JavaScript和XML。咱们知道JSON的定位是轻量级的数据交互格式，客户端在和服务器端进行网络通讯的时候，服务器端返回给咱们的数据大多数是JSON或者是XML。也就是说JSON数据在Ajax网络通讯中可能扮演重要的角色，那什么Ajax不叫异步的JSON而叫作异步的XML呢？ 答案是：由于刚提出这种网络请求技术的时候，XML相比JSON更流行。

在Ajax网络请求中用到的核心对象XMLHTTPRequest也是如此，其实这个对象命名中包含XML也仅仅是由于对于当时而言，XML是网络请求中最经常使用的数据交换格式。若是放在今天，那么它们的名字应该叫作AjaJ(Asynchronous JavaScript and JSON)和JSONHTTPRequest更合适一些。

1.5 JavaScript中JSON数据的序列化和反序列化处理

在网络请求中，若是服务器返回给咱们的数据是JSON数据，那么为了方便对数据的操做，一般咱们在网络请求成功拿到JSON数据以后会先对JSON数据进行反序列化操做。
在前端开发中，早期的JSON解析基本上由eval函数来完成，ECMAScript5对解析JSON的行为进行了规范，定义了全局对象JSON。目前IE8+、FireFox 3.5+、Opera 10.五、Safari 4+和Chrome等浏览器均支持原生的JSON全局对象。

JSON数据的处理主要涉及到两方面：序列化处理和反序列化处理

1.5.1 使用eavl函数来处理JSON数据

eavl函数说明

JavaScript语言中eavl函数能够把字符串转换为js的代码而且立刻执行，使用状况和Function构造函数用法类型。

eval("var a = 123;");
console.log(a + 1); //输出结果为124

由于从某种程度上来说，json实际上是JavaScript语言的严格子集，因此咱们能够直接经过eval函数来对json数据进行解析。须要注意的是，使用eavl函数来对json数据结构求值存在风险，由于可能会执行一些恶意代码。 

eavl函数解析JSON

服务器返回给前端的json数据多是{...}形式的，也多是[...]形式的，分别对应js中的对象和数组。若是是{...}形式的，那么在解析的时候，若是直接以eval(json)的方式处理会报错，由于js中不容许直接写{name:”zs”}相似的语句。遇到这种结构的json数据，一般咱们有两种方式进行处理：① 包装成表达式 ② 赋值给变量。

 1  
 2 //001 [...] 格式的json数据
 3 var arrJson= '[{"name":"zs","age":18},{"name":"lisi","age":28}]';
 4 var jsonArr = eval(arrJson);
 5  
 6 //002 {...} 格式的json数据
 7 var objJson = `{"name":"wendingding","age":18,"contentAbout":["JavaScript","CSS","HTML"],"car":{"number":"粤A6666","color":"red"}}`;
 8  
 9 //eval(json); 错误的演示：报错
10 //处理方式(1)：以拼接的方式赋值给变量
11 eval("var jsonObj1 = " + objJson);
12 //处理方式(2)：包装成表达式
13 var jsonObj2 = eval("(" + objJson +")");
14  
15 //打印转换后获得的数组|对象
16 console.log(jsonArr);
17 console.log(jsonObj1);
18 console.log(jsonObj2);

 

1.5.2 使用JSON全局对象来处理JSON数据

JSON全局对象拥有两个方法：stringify()和parse()，其中parse方法用于把json数据反序列化为原生的js，stringify方法用于把js对象序列化为json字符串。

parse方法的使用
语法：JSON.parse(jsonString,[fn])

参数说明

第一个参数：jsonString为要解析的json字符串
第二个参数：fn是一个可选参数，该参数为函数类型，接收两个参数，分别是每一个键值对的key和value。

 1  
 2 //json字符串
 3 var objJson = `{"name":"wendingding","age":18,"contentAbout":["JavaScript","CSS","HTML"],"car":{"number":"粤A6666","color":"red"}}`;
 4  
 5 //把json字符串转换为js数组
 6 var arrJson= '[{"name":"zs","age":18},{"name":"lisi","age":28}]';
 7  
 8 //把json字符串转换为js对象
 9 var jsonObj = JSON.parse(objJson);
10 var jsonArr = JSON.parse(arrJson);
11 console.log(jsonObj);
12 console.log(jsonArr);
13  
14 //演示parse方法中函数参数的使用
15 function fn(key, value) {
16 if (key === "name") {
17 return value + "++" //在原有value值的基础上拼接++字符串
18 } else if (key === "age") {
19 return undefined //若是返回undefined，则表示删除对应的键值对
20 } else {
21 return value //正常返回对应的value值
22 }
23 }
24 console.log(JSON.parse(objJson, fn));

stringify方法使用说明

语法：JSON.stringify(Obj,[fn|arr],[space])

参数说明

第一个参数：Obj为要进行序列化操做的JavaScript对象
第二个参数：过滤器，能够是函数或者是一个数组
第三个参数：是否在生成的json字符串中保留缩进，用于控制缩进的字符

 1 //js中的普通对象
 2 var obj = {
 3 name:"zs",
 4 age:18,
 5 friends:["小霸王","花仙子","奥特曼"],
 6 other:undefined,
 7 showName:function () {
 8 console.log(this.name);
 9 }
10  
11 };
12  
13 //把js中的对象转换为json字符串
14 //注意：
15 //001 若是键值对中存在value值为undefined的数据，那么会被跳过
16 //002 对象中的方法以及该对象的原型成员数据在进行转换的时候，会被有意忽略
17 console.log(JSON.stringify(obj));
18  
19 //控制缩进，该参数的值能够是数字也能够是字符串，自动换行
20 //001 若是是字符串那么会把对应的字符拼接在键值对前面，超过10个字符的省略
21 //002 若是是数字那么会设置对应的缩进，最多为10，超过则默认为10
22 console.log(JSON.stringify(obj, null, 4));
23 console.log(JSON.stringify(obj, null, "@@"));
24  
25 //过滤器（数组）：表示只处理key为name和age这两个键值对
26 console.log(JSON.stringify(obj, ["name","age"]));
27  
28 //过滤器（函数）：
29 function fn(key,value) {
30 if (key === "age")
31 {
32 return value + 20;
33 }else if (key === "name")
34 {
35 return undefined; //过滤掉key为name这个键值对
36 }else
37 {
38 return value;
39 }
40 }
41 console.log(JSON.stringify(obj,fn));

JSON数据总结

❐ JSON全称是JavaScript Object Notation基于JavaScript，是JavaScript的子集。
❐ JSON虽然是JavaScript的子集，但并不从属于JavaScript，它独立于语言。
❐ JSON是用来表示和传输数据的格式，比XML更轻量级，现已成为web数据交换的事实标准。
❐ JSON的优点在于其能够方便的把JSON字符串数据转换为对应的对象，比XML更方便且数据更小。
❐ JSON语法能够表示：字符串、数值、布尔值、null、对象和数组6种类型的值，不支持undefined。
❐ JSON中的”键”区别于JavaScript，必需要加上双引号。
❐ JSON解析可使用传统的eval函数，或ECMAScript5推出的全局对象来处理。

参考资料

JSON官网：http://json.org/
JSON维基百科：https://en.wikipedia.org/wiki/JSON
JSON做者简介：https://en.wikipedia.org/wiki/Douglas_Crockford
JSON必知必会:https://book.douban.com/subject/26789960/
JavaScript高级程序设计：https://book.douban.com/subject/10546125/

---

• 获取更多、更专业的IT技能，请猛戳~小码哥教育︎
• Posted by 博客园·文顶顶 ~ 文顶顶的我的博客_花田半亩
• 联系做者 简书·文顶顶 新浪微博·Coder_文顶顶
• 原创文章，版权声明：自由转载-非商用-非衍生-保持署名 | 文顶顶