完整的 JSON 教程 – 快速学习 JSON

2025-06-04

完整的 JSON 教程 – 快速学习 JSON

JavaScript 对象表示法（更常见的缩写是 JSON）广泛应用于各种应用程序。其目的是简化通信，最常见的是浏览器和服务器之间的通信。尽管如此，反过来也完全正常。

在您的开发过程中，您不可避免地会一次又一次地遇到 JSON，本文希望为您提供使用它的内容知识。

内容

  • 一些背景
  • 基本介绍
  • JSON 数据类型
  • JSON 格式
  • 基本示例
  • 嵌套 JSON
  • 高级示例
  • 使用 JavaScript 管理 JSON
  • 使用控制台
  • 概括

一些背景

JSON 是 JavaScript 编程语言的重要组成部分，它的用途远超乎人们的想象。JSON 于 2001 年 3 月被发现，现已支持超过 40 种语言（没错，40 种）！只要搭配合适的库，JSON 几乎可以用于所有你听说过的编程语言。

这项技术甚至有自己的网站，其中列出了所有可以使用 JSON 引导应用程序的库。此外，还有一些技术图表，可以帮助您深入了解这个出色的沟通助手的工作原理。

基本介绍

JSON 只要你理解了就很容易上手，它只不过是以特定方式构建的简单文本而已。如果你之前从未见过它，那么现在是时候展示一个小例子了。它看起来是这样的——


    {
        "SiteName": "CodeWall",
        "ArticleName": "JSON Tutorials",
        "Revision": 1
    }

从示例中可以看出，它正如所述，是简单的文本，使用引号格式化，以冒号和逗号分隔，并完全用括号括起来。对于更大的数据，它可以变得更加高级，但我们也将在本文中详细介绍。

JSON 数据类型

JavaScript 对象表示法 (Object Notation) 几乎可以处理所有你可能需要的数据类型。这当然使其成为一个极其强大的工具，能够处理数组和对象本身就非常酷。让我们通过一些小示例来了解这些数据类型，并展示它们在实际应用程序中的具体实现。

细绳


    {
        "StringDataType": "String"
    }

目的


    {
        "ObjectDataType": {
            "myObj": "ObjectData"
        }
    }

大批

    {
        "ArrayDataType": [1, 2, 3, 4]
    }

数字

    {
        "NumberDataType": 1
    }

布尔值

    {
        "BooleanTrueDataType": true,
        "BooleanFalseDataType": false
    }

日期

    {
        "DateStringDataType": "2011-07-14 19:43:37 +0100",
        "JavaScriptDateDataType": new Date(1310669017000)
    }

JSON 格式

在格式化 JavaScript 对象表示法时有一些严格的规则，如果不遵守，您的代码就会失败。

规则 1. 键/标识符 & 值

JSON 由两个主要元素组成：键和值。无论数据类型如何，都需要采用这种格式。您指定的键最终将用于在应用程序内部或其他消费者端访问值。

键值json

规则 2. 键/标识符双引号

是的，在 JavaScript 中或许可以避免这种情况，但在 JSON 中就不行了。JSON 对象中指定的每个标识符或键都必须用双引号引起来，这实际上使其成为一种String类型。虽然改掉不这样做的习惯可能有点困难，但很快就会习惯。

双引号格式

规则3：用花括号包裹对象

无论你的 JSON 代码中有一个对象还是五十个对象，每个对象都需要用花括号括起来，指定每个对象的起始和结束位置。这一点非常重要，尤其是对解释器而言，如果遗漏了这些，你很快就会收到警报！

对象花括号

规则 4. 用冒号分隔键/值

JSON 中的数据必须单独分离，为此，一个简单的冒号就足够了，它位于键或标识符语句之后，值之前。这是另一个必要的概念，您将在将数据记录到控制台时看到它的重要性，这将在本教程的后面部分进行解释。

键值分隔符

规则 #5. 数组应被视为数组

在 JSON 中使用数组时，其处理方式与普通 JavaScript 语法完全相同。无论是字符串还是数字数组，都适用相同的规则。

数组数据类型示例

规则6：用方括号封装对象（数组）

多个对象必须放在一个数组中，这被称为对象数组。当你需要将高级数据传递到前端或后端时，就会用到它。请注意下图中以蓝色高亮显示的括号语法。

对象数组示例

规则7：对象和数据用逗号分隔

毫无疑问，您一生中肯定会处理多个 JSON 对象，它们必须正确分隔，每次都用一个简单的逗号。同样，数据也必须用逗号分隔，让我们通过一个更高级的 JSON 代码片段来实际演示一下。重要的语法已用蓝色突出显示，以便于直观理解。

逗号分隔示例

基本示例

我们已经了解了 JSON 的主要规则，现在来举一个包含各种数据类型的示例。您可以随意使用以下代码进行学习，它们将是一个很好的参考或起点。本例中涉及以下四种数据类型：

  • 细绳
  • 整数
  • 十进制
  • 布尔值
    {
        "Article": "Tutorial",
        "Author": "Dan Englishby",
        "YearPublished": 2018,
        "IsPublished": true,
        "AverageWordsPerSentce": 20.3
    }

嵌套

好的，JSON 在数据加载方面可能相当复杂，因此嵌套是这项技术的关键因素。当你有大量数据需要通信时，嵌套是一门美妙的艺术。下面的示例中展示了嵌套到两层的情况，因为理论上嵌套是无限的。因此，了解如何嵌套必然会派上用场。

我们如何嵌套对象？

通过在 JSON 属性中创建对象数组来实现嵌套对象。请参阅以下示例

    {
        "OuterObject": [{
            "NestedObjects": [{
                    "SomeName": "SomeValue"
                },
                {
                    "SomeName": "SomeValue"
                },
                {
                    "SomeName": "SomeValue"
                }
            ]
        }]
    }

我们如何嵌套数组？

类似地，我们可以嵌套数组，而且也很简单。这样做的唯一问题是，您将无法使用标识符或键来指定数组的数据。这是因为嵌套数组将使用数字索引而不是键值对来标识。

    {
        "OuterObject": [{
            "NestedArray": [
                [
                    "SomeValue"
                ],
                [
                    "SomeValue"
                ],
                [
                    "SomeValue"
                ]
            ]
        }]
    }

高级示例

请参阅以下使用嵌套概念来划分数据的示例。属性Articles包含一组嵌套的文章名称，此外，它还包含下一个嵌套数据集Shared On，该数据集同样嵌套了社交网络名称。

高级示例 #1

    {
        "Category": "Tutorials",
        "Articles": [{
                "Name": "ChartJS Lesson 1",
                "Shared On": [{
                        "SocialNetwork": "Facebook"
                    },
                    {
                        "SocialNetwork": "Twitter"
                    },
                    {
                        "SocialNetwork": "Google+"
                    }
                ]
            },
            {
                "Name": "ChartJS Lesson 2",
                "Shared On": [{
                        "SocialNetwork": "Facebook"
                    },
                    {
                        "SocialNetwork": "Twitter"
                    },
                    {
                        "SocialNetwork": "Google+"
                    }
                ]

            },
            {
                "Name": "ChartJS Lesson 3",
                "Shared On": [{
                        "SocialNetwork": "Facebook"
                    },
                    {
                        "SocialNetwork": "Twitter"
                    },
                    {
                        "SocialNetwork": "Google+"
                    }
                ]
            },
            {
                "Name": "ChartJS Lesson 4",
                "Shared On": [{
                        "SocialNetwork": "Facebook"
                    },
                    {
                        "SocialNetwork": "Twitter"
                    },
                    {
                        "SocialNetwork": "Google+"
                    }
                ]
            }
        ]
    }

上面的示例展示了如何嵌套对象，但你也可以嵌套数组，使用数组的数组是完全正常的。这完全取决于你的具体需求。以下示例展示了Shared On属性如何保存一个社交网络名称数组。

高级示例 2

    {
        "Category": "Tutorials",
        "Articles": [{
                "Name": "ChartJS Lesson 1",
                "Shared On": [
                    ["Facebook"],
                    ["Twitter"],
                    ["Google+"]
                ]
            }
        ]
    }

使用 JavaScript 管理 JSON

JavaScript 与 JSON 的配合非常流畅，这当然是事实，毕竟是 JS 创造了它！JS 中的数据管理方式多种多样，从存储变量到最终访问数据。在本节中，我们将学习每一种方式。

将 JSON 存储在 JavaScript 变量中

如果你之前已经使用过 JavaScript，我知道这会教你如何如何，但对于还没有看过下面这个例子的读者来说——

存储为变量

    var json = {
        "Article": "Tutorial",
        "Author": "Dan Englishby",
        "YearPublished": 2018,
        "IsPublished": true,
        "AverageWordsPerSentce": 20.3
    };

是的，就这么简单，您刚刚将第一个 JSON 数据集存储在 JS 变量中！

访问数据

访问 JSON 值可以通过两种方式完成

  • 点符号样式
  • 括号表示法样式

点符号示例

使用我们在上一个示例中创建的变量，我们现在可以使用以下代码访问其值。

    var articleName = json.Article; // variable is now "Tutorial"

括号表示法示例

    var articleName = json["Article"]; // variable is now "Tutorial"

使用控制台

将 JSON 格式的数据可视化，对于进一步理解它至关重要。一旦你看到它正确地记录到控制台，就会发现它的意义非凡。要成功地将数据记录到控制台，我们首先需要一个支持控制台功能的浏览器，其次是一些 JavaScript。

Google Chrome、Internet Explorer、Firefox 等浏览器都具有此功能，因此如果您还没有安装，请下载一个，然后返回本教程的这一部分。

我如何查看控制台？

好消息是，在大多数浏览器中显示控制台的方法完全相同。使用以下步骤查找你的控制台。

  1. 右键单击网页。
  2. 找到检查元素选项。
  3. 单击它。
  4. 新窗口打开后，找到副标题控制台窗口并单击它。

参见下图中的 Chrome 控制台 –

Chrome 控制台示例

登录到控制台

现在我们已经发现了控制台，让我们使用它，将以下代码添加到您的 JavaScript 并重新加载页面。

    var json = {
        "Article": "Tutorial",
        "Author": "Dan Englishby",
        "YearPublished": 2018,
        "IsPublished": true,
        "AverageWordsPerSentce": 20.3
    };
    console.log(json);

控制台日志示例

如您所见，JavaScript 中创建的 JSON 已完美地记录到 Google Chrome 控制台中。它被精心划分并着色，以便您能够快速直观地理解。

概括

本教程涵盖了 JSON 的方方面面，希望能帮助您掌握并进一步学习。稍加练习，您就能熟练掌握 JSON，并开始尝试处理一些非常复杂的嵌套 JSON。正如我之前提到的，了解这些概念对您的工具集来说非常宝贵，因为有很多库和 API 都使用它。

我已将本教程中的所有示例记录到控制台，以便您可以完整地查看它们。右键单击，检查元素，然后单击控制台窗口即可查看它们。

最后，一个非常有助于验证 JSON 语法正确的在线工具是JSONLint 接口，它是免费的并且非常易于使用。

希望对您有所帮助，感谢您的阅读！

这篇文章是从我的博客CodeWall JSON 教程转载的

文章来源：https://dev.to/danenglishby/the-complete-json-tutorial-quickly-learn-json-14b9
Devto 翻译
PREV
与作家阿里·斯皮特尔的对话
NEXT
Tailwind 的 Create-React-App 速查表