如何在JavaScript中使用JSON

介绍

由于 JSON是从JavaScript编程语言派生,它是作为一个JavaScript数据格式使用的自然选择。 JSON,简称 JavaScript对象符号 ,通常是发音类似的名称为“杰森”。 要了解更多关于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 
}
相反,如果你在一个JSON对象 .js或者 .html文件,你可能会看到它设置为一个变量:
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_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 
}
为了访问任何值,我们将使用如下所示的点符号:
sammy.first_name
sammy.last_name
sammy.online
可变 sammy首先,后跟一个点,其次是键来访问。 要创建一个JavaScript警告,显示我们与键关联的值 first_name在弹出窗口,我们可以通过调用JavaScript这样做的 alert()函数:
alert(sammy.first_name);
OutputSammy
在这里,我们已经成功地调用了相关的值 first_name从钥匙 sammy JSON对象。 我们还可以使用方括号语法从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()的方法,并根据需要处理数据。 我们将看看我们赋给变量JSON对象 obj ,然后我们将用它转换 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对象。虽然你可以文本转换为同一个对象 eval()函数,它是不是很安全,所以我们将使用 JSON.parse()函数。 为了这个例子转换的 以上的部分,我们会通过字符串 s的功能,并将其分配给一个新的变量:
var o = JSON.parse(s)
然后,我们将有对象 o一起工作,这将是相同的对象 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>
OutputName: Sammy Shark
Location: Ocean
在HTML文件的情况下,我们可以看到JSON字符串如何 s转换为对象,通过位于页面的最终渲染检索 访问JSON通过点符号。 JSON.parse()就是解析JSON字符串,并将其转换为对象的安全功能。

结论

JSON是一种在JavaScript中使用的自然格式,并且有许多可用于许多流行编程语言的实现。如果你想使用的格式在另一个预设电台的语言,你可以看到“全语言支持 JSON简介 ”的网站。 由于它重量轻,编程语言和系统之间随时转移,JSON已经经历API的更多的支持,包括 Twitter的API 。 你可能不会创建自己 .json文件,但是从其他渠道采购他们。 您可以检查这些 资源来了解其他转换数据结构JSON。
赞(52) 打赏
未经允许不得转载:优客志 » 系统运维
分享到:

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏