JavaScript学习笔记（四）：JSON

偏执的太偏执、 2022-03-26 13:44 153阅读 0赞

**什么是 JSON ？**

是 JavaScript 对象表示法（JavaScript Object Notation）

是轻量级的文本数据交换格式

独立于语言：使用 Javascript语法来描述数据对象，可通过 JavaScript 进行解析，使用 AJAX 进行传输

JSON 具有自我描述性，更易理解

**为什么使用 JSON？**

JSON 比 XML 更快更易使用：

**使用 XML过程：**

读取 XML 文档

使用 XML DOM 来循环遍历文档

读取值并存储在变量中

**使用 JSON过程：**

读取 JSON 字符串

用 eval() 处理 JSON 字符串

**JSON** **语法规则**

数据在名称/值对中

数据由逗号分隔

大括号保存对象

中括号保存数组

**JSON** **实例**

"sites": \[

"name": "Google",

"url": "www.google.com"

\},

"name": "Taobao",

"url": "www.taobao.com"

由以上实例可以拆分为JSON对象和JSON数组：

**JSON** **对象**

JSON 对象在大括号(\{\})中书写

对象可以有多个 key/value对

key 必须是字符串，value 可以是合法的 JSON 数据类型

key 和 value 中使用冒号(:)分割

每个 key/value 对使用逗号(,)分割

"name": "Google",

"url": "www.google.com"

**JSON** **数组**

JSON 数组在中括号中书写

JSON 中数组值必须是合法的 JSON 数据类型

JavaScript 中，数组值可以是以上的 JSON 数据类型，也可以是 JavaScript 的表达式

"sites": \[

"name": "Google",

"url": "www.google.com"

\},

"name": "Taobao",

"url": "www.taobao.com"

**JSON****使用**

JSON 最常见的用法之一：

1.  从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest）
2.  将 JSON 数据转换为 JavaScript 对象
3.  然后在网页中使用该数据

为了更简单地理解，以下几个案例中使用字符串作为输入进行演示（而不是文件）

**获取对象值实例：Json****循环数组**

获取json的数组内的对象值：使用for-in 来访问数组

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTMxOTQ5_size_16_color_FFFFFF_t_70][]

**JSON** **解析实例1：JSON 字符串转换为 JavaScript 对象**

1. 创建 JavaScript 字符串，字符串为 JSON 格式的数据；

2. 使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象；

3. 解析完成后，我们就可以在网页上使用 JSON 数据了

**说明：**

JSON.parse(text, reviver)

text:必需， 一个有效的 JSON 字符串

reviver: 可选，一个转换结果的函数， 将为对象的每个成员调用此函数

**只有text情况：**

Json对象字符串：访问对象值

![20190117135417160.png][]

Json数组字符串：访问数组对象值

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTMxOTQ5_size_16_color_FFFFFF_t_70 1][]

**既有text也有reviver情况：**

由于JSON 不能存储 Date 对象。如果存储 Date 对象，需要将其转换为字符串。之后再将字符串转换为 Date 对象。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTMxOTQ5_size_16_color_FFFFFF_t_70 2][]

**JSON** **解析实例2： JavaScript 对象转换为JSON 字符串**

JSON 通常用于与服务端交换数据。在向服务器发送数据时一般是字符串。使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。 简单起见，假设以下用到的数据做解析发送到服务器。

**说明：**

JSON.stringify(value, replacer, space)

value:必需， 一个有效的 JSON 对象

replacer: 可选。用于转换结果的函数或数组

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

这里就不一一演示了，代码编写跟前一个案例相似，异常处理也是类似的。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTMxOTQ5_size_16_color_FFFFFF_t_70]: /images/20220326/637ad2f41db94feeb633e8ed77c31c9d.png
[20190117135417160.png]: /images/20220326/35fcf92752904209a05054315604dc31.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTMxOTQ5_size_16_color_FFFFFF_t_70 1]: /images/20220326/7662d4ab6fa048cd95c761f74510f36f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTMxOTQ5_size_16_color_FFFFFF_t_70 2]: /images/20220326/d6c692e360cc498ca2780023bd44964e.png