JavaScript 中的 JSON 使用教程

介绍

有许多方法可以将 JSON 用于 JavaScript。其最基本的用途之一是存储数据。您还可以使用它在客户端之间、服务器之间或从服务器到客户端传输数据。其他有用的应用包括配置和验证数据以及生成数据结构的能力。

在本教程中，我们将探索如何在 JavaScript 程序中使用 JSON。如果您之前有使用 JavaScript 编程的经验，这应该会让您感到很直观。

什么是 JSON？

JSON 代表 JavaScript 对象表示法（JavaScript Object Notation）。它是一种旨在实现共享不同类型数据而设计的格式。JSON 主要利用 JavaScript 作为其主要编程语言。它也适用于其他语言，例如 Python, PHP, Ruby，以及 Java。它易于阅读、极其轻量，并且不需要太多格式化。您可以通过阅读我们的教程来熟悉该格式的通用语法和结构： JSON 数据共享格式概述.

JSON 可以单独使用，也可以在其他文件格式中定义。当单独使用时，它使用 .json 扩展名。当处于其他格式中时，它要么表现为引号内的 JSON 字符串，要么表现为分配给变量的对象。例如，JSON 也可以用于 .html 格式。这种格式允许您相对轻松地在服务器 and 浏览器之间进行数据传输。

JSON 格式是基于文本的。键值数据出现在花括号中。以下是一个典型的 .json 文件的样子：

如果您的 JSON 对象位于 .js 或 .html 文件中，它将像这样显示为一个变量：

在某些情况下，您可能会看到它们都在一行中。这是当 JSON 在 JavaScript 文件中渲染为字符串而不是对象时：

您可以将 JSON 对象转换为字符串。当您想要进行快速数据传输时，这非常有用。

JSON 与 JavaScript 对象

正如我们之前提到的，JSON 适用于任何编程语言。但是，您只能使用 JavaScript 来处理 JavaScript 对象。JSON 和 JavaScript 的语法类似。区别在于 JavaScript 对象的键不需要引号。此外，JavaScript 对象可以使用函数作为值，这意味着它们的限制更少。

在以下示例中，我们展示了一个用户的 JavaScript 对象。该用户是 Sammy Shark，他们现在在线：

如您所见，像 first_name, last_name, online，或 full_name 这样的键周围都没有引号。此外，最后一行中放置了一个函数值。如果您想以字符串形式访问数据，可以使用点表示法调用 user.first_name。如果您想要获取完整姓名，则需要使用 user.full_name()，因为它是一个函数。

如何访问 JSON 数据

正如我们在上一节中提到的，您可以在 JavaScript 中使用点表示法访问 JSON 数据。让我们以一个名为 sammy:

我们用于访问这些值的点表示法将是：

变量排在最前面。之后，我们放一个点。最后，我们写出想要访问的键。

假设我们想在 JavaScript 中制作一个警报，显示 first_name 键的值。为了让它在弹窗中显示，我们将使用 JavaScript 的 alert() 函数，如下所示：

另一种从 JSON 访问数据的方法是使用方括号语法。键应该放在方括号内的双引号中。以下是前一个示例的延续：

如果您正在处理嵌套的数组元素该怎么办？在这种情况下，您必须调用数组中该项的索引号。请看以下示例：

假设我们希望访问字符串 facebook。以下是我们如何使用点表示法并通过其索引号访问数组中该项的方法：

请记住，为每个嵌套元素添加一个额外的点。

与 JSON 一起使用的函数

接下来，我们将了解几个可以与 JSON 一起使用的函数。当您可以将 JSON 从对象转换为字符串或从字符串转换为对象时，数据传输和存储就会变得非常容易。我们将探讨如何以两种不同的方式对 JSON 进行序列化（stringify）和解析（parse）：

• JSON.stringify()

在尝试以轻量级方式传输数据时，使用字符串更好。这就是为什么它被用于在客户端和服务器之间存储 and 传输数据。考虑以下示例。假设您正在一台机器上收集用户设置的数据。您需要将此信息发送到您的服务器。为此，您将使用字符串。然后您可以使用 JSON.parse() 将其转换回来以进行读取和操作。

我们在这里要重点介绍的函数是 JSON.stringify()。此函数将 JSON 对象转换为 JSON 字符串。在此示例中，我们将把对象分配给变量 obj。我们将使用 JSON.stringify() 函数进行转换。为此，我们将把 obj 传递给该函数，然后将字符串分配给变量 s，如下所示：

调用 s 变量将为您提供字符串形式 of JSON：

• JSON.parse()

可以理解的是，JSON.parse() 起到相反的作用。在完成数据传输后，您需要将其转换回 JSON 对象以便对其进行操作。一种选择是使用 eval() 函数。然而，这种方法不太安全。这就是为什么我们更倾向于使用 JSON.parse() 函数。

再次考虑前面的示例。我们将把字符串 s 传递给 JSON.parse() 函数。然后，我们将给它一个新变量：

我们现在的新对象是 o。它将与 obj 相同。当我们考虑在 HTML 文件中像这样使用 JSON.parse() 时，会有更深入的理解：

在这里，您实际上可以看到我们是如何将字符串 s 转换为可检索的对象的。因此，JSON.parse() 是将 JSON 字符串转换为对象的安全选择。

结论

正如我们在本教程中所看到的，JSON 在 JavaScript 中有很多实现。它特别有用，因为几乎可以与任何编程语言一起使用，这使其成为自然的选择。最重要的是，我们才刚刚触及皮毛。您还可以使用 JSON 做更多事情。它已经得到了 API 的支持。

以下是来自我们博客的更多资源，将帮助您使用 JavaScript 进行编程：

• 了解原型和继承在 Javascript 中是如何运作的.
• 详细探索如何将 JavaScript 添加到 HTML 中.
• 如果您正在构建自己的 Web 应用程序，请查看我们关于如何选择最佳服务器配置的指南.

祝您编程愉快！