如何在JavaScript中使用JSON

介绍

由于 JSON 源自 JavaScript 编程语言，因此在 JavaScript 中用作数据格式是很自然的选择。 JSON 是 JavaScript Object Notation 的缩写，通常发音为“Jason”。

要全面了解 JSON 的更多信息，请阅读“JSON 简介”教程。

要开始考虑可以在 JavaScript 程序中使用 JSON 的位置，JSON 的一些一般用例包括：

存储数据
从用户输入生成数据结构
将数据从服务器传输到客户端，从客户端到服务器，从服务器到服务器
配置和验证数据

本教程将向您介绍如何在 JavaScript 中使用 JSON。要充分利用本介绍，您应该熟悉 JavaScript 编程语言。

JSON 格式

JSON 的格式源自 JavaScript 对象语法，但它完全基于文本。它是一种键值数据格式，通常以大括号呈现。

使用 JSON 时，您可能会在 .json 文件中看到 JSON 对象，但它们也可以作为 JSON 对象或字符串存在于程序的上下文中。在此处阅读有关语法和结构的更多信息。

当您使用 .json 文件时，它将如下所示：

sammy.json

{ 
  "first_name"  :  "Sammy", 
  "last_name"   :  "Shark", 
  "online"      :  true 
}

相反，如果您在 .js 或 .html 文件中有一个 JSON 对象，您可能会看到它设置为一个变量：

var sammy = { 
  "first_name"  :  "Sammy", 
  "last_name"   :  "Shark", 
  "online"      :  true 
}

此外，您可能会将 JSON 视为字符串，而不是 JavaScript 程序文件或脚本上下文中的对象。在这种情况下，您也可以在一行中看到所有内容：

var sammy = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';

将 JSON 对象转换为字符串对于快速传输数据特别有用。

我们已经讨论了 JSON 的一般格式，以及您可能希望如何将其视为 .json 文件，或在 JavaScript 中作为对象或字符串。

与 JavaScript 对象的比较

值得记住的是，JSON 是为任何编程语言而开发的，而 JavaScript 对象只能通过 JavaScript 编程语言直接使用。

在语法上，JavaScript 对象与 JSON 类似，但 JavaScript 对象中的键不是引号中的字符串。此外，JavaScript 对象在传递给值的类型方面的限制较少，因此它们可以将函数用作值。

让我们看一个当前在线的网站用户 Sammy Shark 的 JavaScript 对象示例。

var user = {
    first_name: "Sammy",
    last_name : "Shark",
    online    : true,
    full_name : function() {
       return this.first_name + " " + this.last_name;
    }
};

作为一个 JSON 对象，这对您来说看起来很熟悉，但是任何键（first_name、last_name、online 或 [X142X ])、和最后一行有一个函数值。

如果我们想访问上面的 JavaScript 对象中的数据，我们可以使用 dot notation 调用 user.first_name; 并获取一个字符串，但如果我们想访问全名，我们需要通过调用 user.full_name(); 来做到这一点，因为它是一个函数。

JavaScript 对象只能存在于 JavaScript 语言中，因此当您处理需要通过各种语言访问的数据时，最好选择 JSON。

访问 JSON 数据

JSON 数据通常通过点符号在 Javascript 中访问。要了解其工作原理，让我们考虑 JSON 对象 sammy：

var sammy = { 
  "first_name"  :  "Sammy", 
  "last_name"   :  "Shark", 
  "online"      :  true 
}

为了访问任何值，我们将使用如下所示的点表示法：

sammy.first_name
sammy.last_name
sammy.online

首先是变量 sammy，然后是一个点，然后是要访问的键。

要创建一个 JavaScript 警报，在弹出窗口中向我们显示与键 first_name 关联的值，我们可以通过调用 JavaScript alert() 函数来实现：

alert(sammy.first_name);

OutputSammy

在这里，我们已经成功地从 sammy JSON 对象中调用了与 first_name 键关联的值。

我们还可以使用方括号语法来访问来自 JSON 的数据。为此，我们将在方括号内的双引号中保留密钥。对于上面的 sammy 变量，在 alert() 函数中使用方括号语法如下所示：

alert(sammy["online"]);

Outputtrue

当您使用嵌套数组元素时，您应该调用数组中项目的编号。让我们考虑下面的 JSON：

var user_profile = { 
  "username" : "SammyShark",
  "social_media" : [
    {
      "description" : "twitter",
      "link" : "https://twitter.com/digitalocean"
    },
    {
      "description" : "facebook",
      "link" : "https://www.facebook.com/DigitalOceanCloudHosting"
    },
    {
      "description" : "github",
      "link" : "https://github.com/digitalocean"
    }
  ]
}

要访问字符串 facebook，我们可以在点符号的上下文中调用数组中的该项：

alert(user_profile.social_media[1].description);

Outputfacebook

请注意，对于每个嵌套元素，我们将使用一个额外的点。

使用点表示法或方括号语法允许我们访问包含在 JSON 格式中的数据。

使用 JSON 的函数

本节将介绍两种对 JSON 进行字符串化和解析的方法。能够将 JSON 从对象转换为字符串，反之亦然，这对于传输和存储数据很有用。

JSON.stringify()

JSON.stringify() 函数将对象转换为 JSON 字符串。

字符串对于通过以轻量级方式存储或传递信息将数据从客户端传输到服务器很有用。例如，您可以在客户端收集用户的设置，然后将它们发送到服务器。稍后，您可以使用 JSON.parse() 方法读取信息并根据需要处理数据。

我们将查看分配给变量 obj 的 JSON 对象，然后我们将使用 JSON.stringify() 通过将 obj 传递给函数来转换它。我们可以将此字符串分配给变量 s：

var obj = {"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}

var s = JSON.stringify(obj)

现在，如果我们使用 s，我们可以将 JSON 作为字符串而不是对象提供给我们。

'{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}'

JSON.stringify() 函数让我们将对象转换为字符串。相反，我们将查看 JSON.parse() 函数。

JSON.parse()

字符串对于传输很有用，但您希望能够将它们转换回客户端和/或服务器端的 JSON 对象。我们可以使用 JSON.parse() 函数来做到这一点。

为了转换上面 JSON.stringify() 部分中的示例，我们将字符串 s 传递给函数，并将其分配给一个新变量：

var o = JSON.parse(s)

然后，我们将使用对象 o，它与对象 obj 相同。

为了更深入地了解，让我们考虑一个 HTML 文件上下文中的 JSON.parse() 示例：

<!DOCTYPE html>
<html>
<body>

<p id="user"></p>

<script>
var s = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';

var obj = JSON.parse(s);

document.getElementById("user").innerHTML =
"Name: " + obj.first_name + " " + obj.last_name + "<br>" +
"Location: " + obj.location;
</script>

</body>
</html>

OutputName: Sammy Shark
Location: Ocean

在 HTML 文件的上下文中，我们可以看到 JSON 字符串 s 转换为可在页面最终呈现时检索的对象。

JSON.parse() 是解析 JSON 字符串并将其转换为对象的安全函数。

结论

JSON 是一种在 JavaScript 中使用的自然格式，并且有许多可用于许多流行编程语言的实现。如果您想在另一种编程语言中使用该格式，您可以在“Introducing JSON”网站上查看完整的语言支持。

因为它是轻量级的并且很容易在编程语言和系统之间传输，所以 JSON 在 API 中得到了越来越多的支持，包括 Twitter API。

您可能不会创建自己的 .json 文件，而是从其他来源获取它们。您可以查看这些资源以了解如何将其他数据结构转换为 JSON。