介绍
由于 JSON源自JavaScript编程语言,因此它是一种自然的选择,用于JavaScript中的数据格式。
要了解有关 JSON 的更多信息,请阅读(JSON 介绍)(LINK0))教程。
为了开始思考你可以在JavaScript程序中使用JSON的地方,一些JSON的常见用例包括:
- 存储数据
- 通过用户输入生成数据结构
- 将数据从服务器传输到客户端、客户端传输到服务器和服务器传输到服务器
- 配置和验证数据
本教程将为您介绍如何在JavaScript中使用JSON。为了充分利用此介绍,您应该熟悉JavaScript编程语言。
JSON 格式
JSON的格式源自JavaScript对象语法,但完全基于文本. 它是一种关键值数据格式,通常以弯曲的格式进行渲染。
当您使用 JSON 时,您可能会在.json 文件中看到 JSON 对象,但它们也可以作为一个 JSON 对象或字符串在程序的背景下存在。
当您使用.json 文件时,它将看起来像这样:
1[label sammy.json]
2{
3 "first_name" : "Sammy",
4 "last_name" : "Shark",
5 "online" : true
6}
相反,如果您在.js 或.html 文件中有 JSON 对象,您可能会看到它设置为变量:
1var sammy = {
2 "first_name" : "Sammy",
3 "last_name" : "Shark",
4 "online" : true
5}
此外,你可能会看到JSON作为一个字符串,而不是一个对象在JavaScript程序文件或脚本的背景下。
1var sammy = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';
将 JSON 对象转换为字符串对于快速传输数据尤其有用。
我们已经讨论了 JSON 的一般格式,以及您如何预期将其视为.json 文件,或者在 JavaScript 中作为对象或字符串。
对比 JavaScript 对象
值得一提的是,JSON是为任何编程语言而开发的,而JavaScript对象只能通过JavaScript编程语言直接处理。
在语法方面,JavaScript 对象类似于 JSON,但JavaScript 对象中的密钥不是引文中的字符串,JavaScript 对象在转移到值的类型方面也较少受到限制,因此它们可以使用函数作为值。
让我们看看当前在线的网站用户Sammy Shark的JavaScript对象的一个例子。
1var user = {
2 first_name: "Sammy",
3 last_name : "Shark",
4 online : true,
5 full_name : function() {
6 return this.first_name + " " + this.last_name;
7 }
8};
这将看起来非常熟悉,作为一个JSON对象,但在任何一个密钥(‘first_name’、‘last_name’、‘online’或‘full_name’)周围没有引用,并且在最后一行中有一个函数值。
如果我们想要访问上面的JavaScript对象中的数据,我们可以使用 dot notation来调用 user.first_name; 并获得一个字符串,但如果我们想要访问完整的名称,我们需要通过调用 user.full_name(); 这样做,因为它是一个函数。
JavaScript 对象只能存在于 JavaScript 语言中,所以当您使用需要通过不同语言访问的数据时,最好选择 JSON。
访问 JSON 数据
JSON 数据通常在 JavaScript 中通过点符号获取。 要了解这种情况是如何工作的,让我们来考虑 JSON 对象 sammy:
1var sammy = {
2 "first_name" : "Sammy",
3 "last_name" : "Shark",
4 "online" : true
5}
为了访问任何值,我们将使用像这样的点符号:
1sammy.first_name
2sammy.last_name
3sammy.online
变量sammy首先是,然后是点,然后是要访问的密钥。
要创建一个JavaScript警报,显示我们在爆炸窗口中与first_name密钥相关的值,我们可以通过呼叫JavaScript的alert()函数来做到这一点:
1alert(sammy.first_name);
1[secondary_label Output]
2Sammy
在这里,我们已经成功地调用了来自sammy JSON 对象的first_name密钥相关的值。
我们还可以使用平方语法访问来自JSON的数据。为了做到这一点,我们会将密钥在平方中保留在双引文中。
1alert(sammy["online"]);
1[secondary_label Output]
2true
當你使用 nested array elements時,你應該打電話給數列中的項目號碼,讓我們考慮下面的 JSON:
1var user_profile = {
2 "username" : "SammyShark",
3 "social_media" : [
4 {
5 "description" : "twitter",
6 "link" : "https://twitter.com/digitalocean"
7 },
8 {
9 "description" : "facebook",
10 "link" : "https://www.facebook.com/DigitalOceanCloudHosting"
11 },
12 {
13 "description" : "github",
14 "link" : "https://github.com/digitalocean"
15 }
16 ]
17}
要访问Facebook字符串,我们可以在点符号的背景下调用数组中的该项目:
1alert(user_profile.social_media[1].description);
1[secondary_label Output]
2facebook
请注意,对于每一个嵌入的元素,我们将使用一个额外的点。
使用点符号或方块符号语法允许我们访问 JSON 格式中包含的数据。
使用 JSON 的功能
本节将探讨两种方法来编写和解析 JSON. 能够将 JSON 从对象转换为字符串,反之亦然,对于传输和存储数据是有用的。
JSON.stringify( )
JSON.stringify() 函数将对象转换为 JSON 字符串。
字符串有助于通过轻量级的方式存储或传输信息将数据从客户端传输到服务器,例如,您可以从客户端收集用户的设置,然后将其发送到服务器。
我们将查看一个 JSON 对象,我们将其分配给变量 obj,然后将其转换为 JSON.stringify() 通过将 obj 传递给函数。
1var obj = {"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}
2
3var s = JSON.stringify(obj)
现在,如果我们使用s,我们将有JSON作为一个字符串而不是一个对象。
1'{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}'
JSON.stringify()函数允许我们将对象转换为字符串,反之亦然,我们会看看JSON.parse()函数。
点击查看( )
字符串可用于传输,但您需要能够将它们转换为客户端和/或服务器侧的 JSON 对象,我们可以使用JSON.parse()函数来完成此操作。
要转换上面的 JSON.stringify()部分中的示例,我们会将字符串 `s' 传递给函数,并将其分配给一个新的变量:
1var o = JSON.parse(s)
然后,我们将有对象o来工作,这将与对象obj相同。
要深入了解,让我们在 HTML 文件的背景下考虑一个 JSON.parse() 示例:
1<!DOCTYPE html>
2<html>
3<body>
4
5<p id="user"></p>
6
7<script>
8var s = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';
9
10var obj = JSON.parse(s);
11
12document.getElementById("user").innerHTML =
13"Name: " + obj.first_name + " " + obj.last_name + "<br>" +
14"Location: " + obj.location;
15</script>
16
17</body>
18</html>
1[secondary_label Output]
2Name: Sammy Shark
3Location: Ocean
在HTML文件的背景下,我们可以看到如何将JSON字符串s转换为可在页面最终渲染中获取的对象,通过点符号访问JSON(https://andsky.com/tech/tutorials/how-to-work-with-json-in-javascript#accessing-json-data)。
JSON.parse() 是一个安全的函数,用于解析 JSON 字符串并将其转换为对象。
结论
JSON 是一个在 JavaScript 中使用的自然格式,并且有很多可用于许多流行的编程语言的实现方案. 如果您想在其他编程语言中使用该格式,您可以在[介绍 JSON](http://www.json.org/)网站上看到完整的语言支持。
由于它很轻,易于在编程语言和系统之间传输,因此JSON在API中得到越来越多的支持,包括Twitter API(LINK0)。
您可能不会创建自己的.json 文件,而是从其他来源获取它们. 您可以查看这些资源(https://andsky.com/tech/tutorials/an-introduction-to-json#resources)来了解如何将其他数据结构转换为 JSON。