2. JSON语法规则

LXLong
2,464 阅读10分钟

JSON 的语法与 JavaScript 中的对象很像，在 JSON 中主要使用以下两种方式来表示数据：

  • Object（对象）：键/值对（名称/值）的集合，使用花括号{ }定义。在每个键/值对中，以键开头，后跟一个冒号:，最后是值。多个键/值对之间使用逗号,分隔，例如{"name":"JSON","url":"http://c.biancheng.net"}；

  • Array（数组）：值的有序集合，使用方括号[ ]定义，数组中每个值之间使用逗号,进行分隔。

下面展示了一个简单的 JSON 数据：

{
    "Name":"JSON语法",
    "Url":"http://c.biancheng.net/",
    "Tutorial":"JSON",
    "Article":[
        "JSON 是什么？",
        "JSONP 是什么？",
        "JSON 语法规则"
    ]
}

注意：所有 JSON 数据需要包裹在一个最外层的花括号中，类似于 JavaScript 中的对象。

1. JSON 中的键——在双引号中定义

JSON 数据是以键/值对（名称/值）的形式书写的，键表示数据的名称，需要以字符串的形式定义（在双引号中定义），后面紧跟一个冒号，最后是值，如下例所示：

{
  "name":"JSON语法"
}

类似于 JavaScript 对象中的：

{
  name:"JSON语法"
}

2. JSON 中的键值

JSON 中的值可以是以下数据类型：

  • 数字（整数或浮点数）；

  • 字符串（需要在双引号中定义）；

  • 布尔值（true 或 false）；

  • 数组（在方括号中定义）；

  • 对象（在花括号中定义）；

  • null（空）。

另外，在 JSON 中，不同的键/值对之间需要使用逗号进行分隔，如下例所示：

{
    "number":123,
    "float":3.14,
    "string":"JSON的值",
    "bool":true,
    "array":[
        "employees",
        {"name":"peter", "age": 18},
        {"name":"Anna", "age": 16}
    ],
    "object":{
        "name":"JSON的键值",
        "url":"http://c.biancheng.net/"
    }
}

在使用 JSON 时，有以下几点需要注意：

  • JSON 是一段包裹在花括号中的数据，数据由若干键/值对组成；
  • 键和值之间使用冒号分隔；
  • 不同的键/值对之间使用逗号分隔；
  • 键需要以字符串的形式定义（即使用双引号包裹，注意：不能使用单引号）；
  • 值可以是数字、字符串、布尔值、数组、对象、null；
  • 键必须是唯一的，不能重复，否则后定义的键/值对会覆盖前面定义的键/值对；
  • JSON 中不可以使用八进制或十六进制表示数字。

3.JSON 与 JavaScript 对象的区别

粗略的看起来，您可能觉得 JSON 就是一个 JavaScript 的对象，但其实不是这样的，JSON 与 JavaScript 对象之间还是有区别的。

  • 首先，JSON 是一种数据交换格式，可以跨语言、跨平台使用，它只是与 JavaScript 有些渊源，并不是 JavaScript 的一部分。
  • 就语法而言，JSON 与 JavaScript 最主要的区别就是，JSON 中每个键都必须是一个字符串，而 JavaScript 对象则没有这个限制，如下所示：
// JavaScript 中的对象  
{  
    foo: "bar"  
}  
  
// JSON  
{  
    "foo": "bar"  
}
  • 另外，在 JavaScript 对象中，既可以使用双引号也可以使用单引号，但在 JSON 中只能使用双引号。
  • 还有就是 JSON 中没有日期类型，也不能定义注释，所以只能通过日期的字符串（例如：1970-01-01）或者时间戳（例如：1632366361）来表示日期。

4. JSON 中支持的数据类型

JSON 中支持的数据类型可以分为简单数据类型和复杂数据类型两种，其中简单数据类型包括：string（字符串）、number（数字）、boolean（布尔值）和 null（空）；复杂数据类型包括：Array（数组）和 Object（对象）。

4.1、JSON 中的字符串

JSON 中的字符串需要使用双引号定义（注意：不能使用单引号），字符串中可以包含零个或多个 Unicode 字符。另外，JSON 的字符串中也可以包含一些转义字符，例如：

  • \反斜线本身；

  • /正斜线；

  • "双引号

  • \b退格；

  • \f换页；

  • \n换行；

  • \r回车；

  • \t水平制表符；

  • \u四位的十六进制数字。

示例代码如下：

{
    "name":"JSON字符串",
    "url":"http://c.biancheng.net/",
    "title":"JSON 数据类型"
}

4.2、JSON 中的数字——不区分整型和浮点型

JSON 中不区分整型和浮点型，只支持使用 IEEE-754 双精度浮点格式来定义数字。此外，JSON 中不能使用八进制和十六进制表示数字，但可以使用 e 或 E 来表示 10 的指数。

IEEE-754 表示二进制浮点数算术标准，是 20 世纪 80 年代以来使用最广泛的浮点数运算标准。

示例代码如下：

{
    "number_1" : 210,
    "number_2" : -210,
    "number_3" : 21.05,
    "number_4" : 1.0E+2
}

4.3、JSON 中的布尔值布尔值

JSON 中的布尔值与 JavaScript、PHP、Java 等编程语言中相似，有两个值，分别为 true（真）和 false（假），如下例所示：

{
    "message" : true,
    "pay_succeed" : false
}

4.4、null（空）

null（空）是 JSON 中的一个特殊值，表示没有任何值，当 JSON 中的某些键没有具体值时，就可以将其设置为 null，如下例所示：

{
    "id" : 1,
    "visibility" : true,
    "popularity" : null
}

4.5、JSON 中的对象

JSON 中，对象由花括号{ }以及其中的若干键/值对组成，一个对象中可以包含零个或多个键/值对，每个键/值对之间需要使用逗号,分隔。

键必须是字符串类型（即使用双引号将键包裹起来），而值可以是 JSON 中的任意类型，键和值之间需要使用冒号:分隔开。

如下例所示：

{
    "author": {
        "name": "LXL",
        "url": "https://juejin.cn/user/3980668082334184"
    }
}

在 JSON 中使用对象类型时，有以下几点需要注意：

  • 对象必须包裹在花括号{ }中；

  • 对象中的内容需要以键/值对的形式编写；

  • 键必须是字符串类型，即使用双引号" "将键包裹起来；

  • 值可以是任意 JSON 中支持的数据类型（例如字符串、数字、对象、数组、布尔值、null 等）；

  • 键和值之间使用冒号进行分隔；

  • 不同键/值对之间使用逗号进行分隔；

  • 对象中的最后一个键/值对末尾不需要添加逗号。

另外，JSON 对象中可以嵌套其它的任意类型，例如对象、数组等，如下例所示：

// 键/值对中，键必须使用双引号定义，值若是字符串类型也必须使用双引号定义
{
    "name": "C语言中文网",
    "age": 18,
    "url": "http://c.biancheng.net/",
    "course": {
        "title": "JSON教程",
        "list": [
            "JSON是什么？",
            "JSON语法规则",
            "JSON数据类型"    // 这个地方不能添加逗号，因为它是数组中最后一个值
        ]    // 这个地方也不能添加逗号，因为它是对象中最后一个键/值对
    }    // 这个地方也不可以有逗号，因为它也是对象的最后一个键/值对
}

提示：上面示例中，注释不是 JSON 的一部分，因为 JSON 中不支持定义注释。使用上述 JSON 数据之前，需要先将注释内容删除。

4.6、JSON 中的数组

JSON 中，数组由方括号[ ]和其中的若干值组成，值可以是 JSON 中支持的任意类型，每个值之间使用逗号,进行分隔，如下例所示：

{
    "course" : [
        "JSON 教程",
        "JavaScript 教程",
        "HTML 教程",
        {
            "website" : "LXL",
            "url" : "https://juejin.cn/user/3980668082334184"
        },
        [
            3.14,
            true
        ],
        null
    ]
}

在 JSON 中使用数组时，有以下几点需要注意：

  • 数组必须使用方括号[ ]定义；
  • 数组的内容由若干值组成；
  • 每个值之间需要使用逗号,进行分隔；
  • 最后一个值末尾不需要添加逗号；
  • 数组中的值可以是 JSON 中的任何类型，例如字符串、数字、对象、数组、布尔值、null 等。

5. VSCode进行 JSON文件对比

Visual Studio Code（简称“VS Code”）中内置了文件对比工具。

首先，选中第一个要对比的文件，点击鼠标右键，在弹出的菜单中选择“选择以进行比较”或“Select for Compare”，如下图所示：

image.png

然后，选中第二个要对比的文件，点击鼠标右键，在弹出的菜单中选择“与已选项目进行比较”或“Compare with Selected”，如下图所示：

image.png

对比结果如下图所示：

image.png

6. JSON和XML的区别

JSON 和 XML 都是基于文本的可读格式，独立于编程语言，能够在几乎所有的编程语言中使用。

6.1 什么是 XML？

XML 全称“Extensive Markup Language”，译为“可扩展标记语言”，是一种源自 SGML 的、基于文本的数据格式（XML 是 SGML 的一个子集）。

SGML 全称“Standard Generalized Markup language”，译为“标准通用标记语言”，简称“通用标言”，是一种定义电子文档结构和描述其内容的国际标准语言，是 1986 年国际标准化组织出版发布的一个信息管理方面的国际标准。

XML 是一种专门为了存储数据而创建的标记语言，它的编写方式与 HTML 非常相似，能够通过不同的标签来标记不同的内容，下面展示了一个简单 XML 数据：

<?xml version="1.0" encoding="ISO-8859-1"?>
<note>
    <title>JSON教程</title>
    <author>XML</author>
    <url>http://c.biancheng.net/</url>
    <catalogue>
        <li>JSON是什么？</li>
        <li>JSONP是什么？</li>
        <li>JSON语法规则</li> 
    </catalogue>
</note>

XML 旨在传输或保存数据，而不是显示数据，在 XML 中，没有预定义标签，其中使用的所有标签都是自定义的，而且所有的标签都由两个部分组成，分别是开始标签（例如）和结束标签（例如）。需要注意的是，XML 中的标签是区分大小写的。

XML 的主要优点是它可以跨平台、跨语言进行传输。另外，XML 数据可以保存在格式为 .xml 的文本文件中。

6.2 JSON 与 XML 之间的差异

尽管 JSON 和 XML 的功能非常相似，但它们之间还是存在一些差异的，如下表所示：

JSONXML
JSON 是一种数据格式XML 是一种标记语言
与 XML 相比，JSON 数据更容易阅读XML 文档相对来说阅读起来比较困难
JSON 数据可以存储在 .json 格式的文本文件中XML 数据可以存储在 .xml 格式的文本文件中
JSON 中支持字符串、数字、数组、布尔值等类型XML 中只有字符串类型
JSON 没有显示功能XML 提供了显示数据的能力，因为它是一种标记语言
JSON 仅支持 UTF-8 编码XML 支持各种编码
JSON 不支持注释XML 支持注释
JSON 不支持命名空间XML 支持命名空间
JSON 读写速度更快，且更容易解析相对于 JSON，XML 数据结构更加复杂，解析速度相对较慢
相对于 XML，JSON 的安全性较低相对于 JSON，XML 的安全性更高

6.3 JSON 与 XML 之间的相似之处

除了有许多不同的地方外，JSON 与 XML 之间也有许多相似的地方。

  • 最主要的就是，它们的用途是相同的，即存储和传输数据。
  • 其次，它们都可以存储在文本文件中，程序员无需借助计算机就可以读写它们中的内容。
  • 此外，在 HTTP 请求中，JSON 和 XML 都能够作为传输数据的类型，在服务器与客户端之间进行传递。

7. Ajax获取JSON数据的例子

Ajax 全称“Asynchronous JavaScript and XML”，译为“异步 JavaScript 和 XML”，程序员们习惯称之为“阿贾克斯”，通过 Ajax 我们可以异步在服务器与客户端之间传递数据。在 Ajax 中，普遍使用 JSON 作为传输数据的格式。

一般情况下，我们可以通过 JavaScript 来发送 Ajax 请求，并接收响应的信息。下面通过一个示例来演示一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="text/html; charset=utf-8">
    <title>AJAX And JSON</title>
    <script>
        function load() {
            var url = "./data.json"; // 获取 JSON 数据的链接
            var request;

            if (window.XMLHttpRequest) {
                request = new XMLHttpRequest(); //发送 Ajax 请求，适用于 Chrome, mozilla 等浏览器 
            } else if (window.ActiveXObject) {
                request = new ActiveXObject("Microsoft.XMLHTTP"); // 发送 Ajax 请求，适用于 IE 浏览器 
            }
            request.onreadystatechange = function() {
                if (request.readyState == 4) {
                    var jsonObj = JSON.parse(request.responseText); // 解析 JSON 数据
                    document.getElementById("title").innerHTML     = jsonObj.title;
                    document.getElementById("author").innerHTML    = jsonObj.author;
                    document.getElementById("url").innerHTML       = jsonObj.url;
                    document.getElementById("catalogue").innerHTML = jsonObj.catalogue;
                }
            }
            request.open("GET", url, true);
            request.send();
        }
    </script>
</head>
<body>
    Title: <span id="title"></span><br />
    Author: <span id="author"></span><br />
    Url: <span id="url"></span><br />
    Catalogue: <span id="catalogue"></span><br />
    <button type="button" onclick="load()">点击加载 JSON 数据</button>
</body>
</html>

上面代码中使用到的 date.json 文件中的内容如下：

{
  "title": "JSON教程",
  "author": "LXL",
  "url": "http://c.biancheng.net/",
  "catalogue": [
      "JSON是什么？",
      "JSONP是什么？",
      "JSON语法规则"
  ]
}

提示，上述代码需要在服务器环境中才能运行，运行之后点击网页中的按钮即可获取指定的 JSON 数据，并将数据显示到网页中，如下图所示：

1.gif

avatar
文章
阅读
粉丝