如何在 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 
}

Copy

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

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

Copy

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

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

Copy

将 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;
    }
};

Copy

这将期待您作为一个JSON对象很熟悉,但周围有任何按键无引号(first_namelast_nameonline,或full_name),并且有在最后一行的函数值。

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

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

访问 JSON 数据

JSON 数据通常通过点表示法在 Javascript 中访问。要了解这是如何工作的,让我们考虑一下 JSON 对象sammy

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

Copy

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

sammy.first_name
sammy.last_name
sammy.online

Copy

变量sammy是第一个,然后是一个点,然后是要访问的键。

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

alert(sammy.first_name);

Copy

OutputSammy

在这里,我们成功地first_namesammyJSON 对象中调用了与键关联的值。

我们还可以使用方括号语法从 JSON 访问数据。为此,我们会将键放在方括号内的双引号中。对于我们sammy上面的变量,在alert()函数中使用方括号语法如下所示:

alert(sammy["online"]);

Copy

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"
    }
  ]
}

Copy

要访问 string facebook,我们可以在点符号的上下文中调用数组中的该项目:

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

Copy

Outputfacebook

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

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

处理 JSON 的函数

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

JSON.stringify()

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

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

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

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

var s = JSON.stringify(obj)

Copy

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

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

Copy

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

JSON.parse()

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

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

var o = JSON.parse(s)

Copy

然后,我们将使用与 objecto相同的对象obj

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

<!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>

Copy

OutputName: Sammy Shark
Location: Ocean

在 HTML 文件的上下文中,我们可以看到 JSON 字符串如何通过点表示法访问 JSONs转换为可在页面最终呈现时检索的对象。

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

结论

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

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

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

Z2ER大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有,请在下载后24小时之内自觉删除,若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与Z2ER无关。本站发布的内容若侵犯到您的权益,请联系z2er@z2er.com删除,将及时处理!
Z2ER » 如何在 JavaScript 中使用 JSON