JSON 学习笔记

引言 ：我们经常会说JSON是什么？ 不就是定义的一种数据格式嘛，那到底这是一种怎样的数据格式了，今天我们就来揭下这层神秘的面纱。 

 1.1  什么是JSON?

  JSON 是存储和交换文本信息的语法，类似于 XML ，但是比 XML 更小、更快、更易解析。

• JSON 指的时 JavaScript 对象表示法（JavaScript Object Notation）。
• JSON 是轻量级的文本数据交换格式。
• JSON 独立于语言 ： 使用JavaScript 语法来描述数据对象，但是JSON 仍然独立于语言和平台，JSON 解析器和 JSON 库支持许多不同的编程语言。目前非常多的动态编程语言都支持JSON（PHP、JSP 、 .NET）。
• JSON具有自我描述性，更易理解。

 1.1.1 JSON 实例 

{
    "sites":[

       {"name":"竹林学者"，“url”:"zhulinxuezhe.cn"},
       {"name":"google", "url" : "www.google.com"}

    ]

}

1.2 JSON - 转换为 JavaScript 对象

JSON 在文本格式语法上与创建 JavaScript 对象的代码相同，故无需解析器，JavaScript 程序能够使用内建的eval()函数，用JSON 数据来生成原生的JavaScript 对象。

 1.3 JSON 与 XML 相比 的 相同之处 和不同之处 

 1.3.1 相同之处 

• JSON 是纯文本
• JSON 具有”自我描述性“
• JSON 具有层级结构（值中存在值）
• JSON 可通过 JavaScript进行解析
• JSON 数据可用 AJAX 进行传输

1.3.2 不同之处

• 没有结束标签
• 更短
• 读写的速度更快
• 能够使用内建的 JavaScript eval 方法进行解析
• 使用数组
• 不使用保留字

1.4 为什么使用JSON ？

对于 AJAX 程序来说，JSON 比 XML 更快更易使用

1.4.1 使用XML 

• 读取XML 文档
• 使用 XML DOM 来循环遍历文档
• 读取值并存储在变量中 

1.4.2 使用JSON 

• 读取JSON 字符串
• 使用 eval() 处理JSON 字符串 

 1.5 JSON 语法

注 ： JSON 语法是JavaScript 语法的子集。

1.5.1 JSON 语法规则 

• 数据在名称 /  值对中
• 数据由逗号分隔
• 大括号保存对象
• 中括号保存数组

  1）名称 / 值对

• 书写规则 ："name" = "竹林学者"
• 上述语句等价于 JavaScript 语句 ： name = "JavaScript"

  2）值类型 ：

•     数字（整数或浮点数）
•     字符串 
•     逻辑值
•     数组
•     对象
•      null

3） 数字 

•    整型或浮点型  例如 ： { "age" : 30 }

4）对象

JSON对象在大括号（{}）中书写 ：

• 对象可以包含多个名称 / 值对
• {“name” : "竹林学者", "url" = "www.zhulinxuezhe.cn"} 
• 上述语句等价于 JavaScript 语句  name = “竹林学者”     url = "www.zhulinxuezhe.cn"

5）数组 

  数组在中括号[] 中书写 ，数组可以包含多个对象 （下边sites 是包含三个对象的数组，，每个对象代表一条关于某个网站的记录）

{

 "sites" : [

{ "name" : "竹林学者", "url" : "www.zhulinxuezhe.cn" },

{ "name" : "Google" , "url" : "www.google.com" },

{“name” : "百度" , "url" : “www.baidu.com”}

]

}

 6）布尔值

• { "flag" : true}

7) null

• JSON可以设置null 值 ：
• { "zhulinxuezhe" : null} 

 1.6 JSON 使用JavaScript 语法

   因为JSON 使用 JavaScript 语法，所以无需额外的软件就能处理 JavaScript 中的 JSON ，如下所示。

JavaScript 创建 JSON 对象
第一个网站名称: 
 
第一个网站修改后的名称: 
 

运行结果 ：

1.8 JSON 文件

•  JSON 文件的文件类型是 ".json"
• JSON 文本的 MIME 类型是 "application/json" 

 1.7 JSON 对象

1.7.1 实例 : 

{ "name" : "zhulinxuezhe" , "alexa" : "10000" , "site" : null}

• JSON 对象使用在大括号 {} 中书写
• 对象可以包含多个 key/value （键/值）对
• key 必须是字符串 ， value 可以是合法的JSON 数据类型 （字符串，数字。对象，数组，布尔值，null）
• key 和 value 使用 冒号 （：）分割
• 每个 key/value 对 使用逗号（，）分割

1.7.2 如何访问对象值

可以使用(.) 来访问对象的值 ：

var myObj , x;

myObj = { "name" : "zhulinxuezhe" , "alexa" : "10000" , "site" :  null};

x = myObj.name;

你可以使用点号（.）来访问 JSON 对象的值：

 结果 :

1.7.3 循环对象 ：

 1）使用 for - in 来循环对象的属性 ：

RUNOOB.COM
 
zhulinxuezhe







​
使用 for-in 来循环对象的属性:
​

​

​

结果 ：

 2）在for-in 循环对象的属性时，使用中括号（[]）来访问属性的值 ：

在 for-in 循环对象的属性时，使用中括号（[]）来访问属性的值：

结果 ：

1.7.4 嵌套 JSON 对象 

JSON 对象中可以包含另一个 JSON 对象 ：

访问 JSON 内嵌对象。

结果 :

1.7.5 修改删除值 

• myObj.sites.site1 = "www.google.com"; 或者   myObj.sites["site1"] = "www.google.com";
• delete myObj.sites.site1;     或者   delete myObj.sites["site1"]

1.8 JSON 数组 ：

• JSON 数组在中括号中书写
• 数组中值必须是合法的数据类型，（字符串、数字、对象、数组、布尔值、null）
• JavaScript中，数组值可以是以上的 JSON 数据类型，也可以是JavaScript 表达式，包括 函数，日期，及 undefined

 1）三种形式访问 数组

• 通过索引值访问数组
• 通过 for-in 访问数组
• 通过 for 循环访问数组

访问 JSON 对象数组值。

2）嵌套JSON 对象中的数组

通过采用for-in 来循环访问每个数组，外层嵌套内层。

循环内嵌数组：

3）修改，删除数组元素

• myObj.sites[1]  = "github";
• delete myObj.sites[1];

1.9 JSON.parse()

• JSON 通常用于与服务端交换数据
• 在接收服务端数据时一般是字符串
• 通过使用JSON.parse() 方法将数据转换为 JavaScript 对象

 1.9.1 语法格式 

JSON.parse(text[,reviver])

• text : 必须 ，一个有效的 JSON 字符串
• reviver ： 可选， 一个转换结果的函数，将为对象的每个成员调用此函数。

 1.9.2 实例展示 ：

从 JSON 对象中创建 JavaScript 对象

1.9.3 从服务端接受 JSON  数据

我们使用AJAX 从服务器请求JSON 数据，并接解析为 JavaScript 对象。

实例代码 ： 

使用 XMLHttpRequest 来获取文件内容
文件内容是标准的 JSON 格式，可以使用 JSON.parse 方法将其转换为 JavaScript 对象。





查看 JSON 文件数据 json_demo.txt

1.9.4  异常  （JSON.parse(text)） 或者 （JSON.                      stringfy(text)）此处 parse 和 stringfy使用一致

JSON 不能存储Data 对象 /函数 ，如果要存储Data 对象 /函数，则需要将其转换为字符串，之后在转为 Data 对象 /函数。

Data ：

var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';
var obj = JSON.parse(text);
obj.initDate = new Date(obj.initDate);

document.getElementById("demo").innerHTML = obj.name + "创建日期: " + obj.initDate;

函数 ：（不建议使用）

var text = '{ "name":"Runoob", "alexa":"function () {return 10000;}", "site":"www.runoob.com"}';
var obj = JSON.parse(text);
obj.alexa = eval("(" + obj.alexa + ")");

document.getElementById("demo").innerHTML = obj.name + " Alexa 排名：" + obj.alexa();

1.10 JSON.stringify() 

JSON 通常用于与服务端交换数据，而在向服务端发送数据时一般是字符串，可以通过JSON.stringfy() 方法将 JavaScript 对象转换为字符串。

 语法 格式 ：

JSON.stringfy( value [ , replacer [ , space ] ] )

 参数说明 ：

 value ： 必须 ，需要转换的JavaScript 值 （通常为对象或数组）

replacer ：可选，用于转换结果的函数或数组，

space ： 可选，文本添加缩进、空格和换行符。

1.10.1 JavaScript 对象转换  

代码实例 ：

将 JavaScript 对象转换为 JSON 字符串

1.10.2 JavaScript 数组转换

 var arr = [ "Google", "Runoob", "Taobao", "Facebook" ];
var myJSON = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myJSON;

 1.11 JSON 使用 

JSON 最常见的用法 之一 ，就是从web 服务器 读取JSON 数据，（作为文本或作为 HttpRequest），将JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。

从 JSON 字符串中创建对象

网站名: 
 
网站地址: 
 
 

通过 JavaScript 的 eval() 函数，将JSON 文本转换为JavaScript 对象，但是 必须将文本包围在括号中，避免语法错误。