JavaScript 中如何使用 JSON

卡拉先生
发布于 2020年07月07日 | 上次编辑:2020年07月31日

如何在 JavaScript 中使用 JSON

JavaScript
JavaScript

简介

由于 JSON 源自 JavaScript 语言,因此在 JavaScript 中用作数据格式就成了自然的选择。 JSON(JavaScript 对象表示法的缩写)通常发音为 “Jason”。同时 JSON 作为 API 的首选格式,特别是在 REST API 大行其的今天(关于 REST API 请参考REST API 设计指南一文),熟练掌握 JSON 的用法,对于增进 JavaScript 功底有很大帮助。

你可以在以下 JavaScript 部分,使用 JSON。举例来说 JSON 的一些用例包括:

  • 储存数据
  • 根据用户的输入生成数据结构
  • 从服务器到客户端,从客户端到服务器以及从服务器到服务器的数据传输(REST API
  • 配置和验证数据

本教程将向你介绍如何在 JavaScript 中使用 JSON。 为了充分利用本教程,我们假设你已经掌握了最基本的 JavaScript 语法。如果没有的话,欢迎到卡拉社区学习。

JSON 格式

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

使用 JSON 时,可能会在 .json 文件中看到 JSON 对象,但它们也可以作为 JSON 对象或字符串存在于程序中。如果你需要把 JSON 的内容存在 .json 文件内,那么如下所示:

{
  "first_name"  :  "卡拉",
  "last_name"   :  "搜索",
  "online"      :  true
}

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

var kalasearch = {
  "first_name"  :  "卡拉",
  "last_name"   :  "搜索",
  "online"      :  true
}

此外,在 JavaScript 程序或脚本的上下文中,你会把 JSON 视为字符串而不是对象。在这种情况下,你可以在一行中看到所有内容。(请注意花括号外的单引号)

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

在 API 中,有时会将 JSON 对象转换为字符串,以便快速传输数据。

我们已经介绍了 JSON 的一般格式,以及你可能会把它当作 .json 文件,或者在 JavaScript 中将其作为对象或字符串。

与 JavaScript 对象的关系

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

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

我们来看一看 JavaScript 对象网站用户 王 小二 的例子,这个用户现在正在线上。

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

你可能对 JSON 对象非常熟悉,但请注意,这里任何键(first_namelast_nameonlinefull_name)周围没有引号,最后一行中有一个函数值。

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

JavaScript 对象只能存在于 JavaScript 语言中,因此当你处理需要用各种语言访问的数据时,最好选择 JSON。也就是说,上面提到的这个 user 对象,是一个 JavaScript 对象,而不是一个 JSON

JSON 数据

JSON 数据通常在 Javascript 中通过点符号进行访问。要了解其工作原理,我们先看一看 JSON 对象 王小二

var user = {
  "first_name"  :  "小二",
  "last_name"   :  "王",
  "online"      :  true
}

为了访问任意的值,我们将使用如下所示的点符号:

user.first_name
user.last_name
user.online

首先是变量 user,然后跟一个点,最后跟要访问的键(key)。

如果你想试一下这个操作,你可以直接在浏览器里用个弹窗来试试。我们可以通过调用函数 alert()

alert(user.first_name);
// 输出
小二

现在,我们已经成功地从 JSON 对象 user 中拿出来了first_name的值。

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

alert(user["online"]);
// Output
true

使用嵌套数组元素时,应调用数组中该项的编号。让我们看一看下面的 JSON:

var user_profile = {
  "username" : "KalaSearch",
  "social_media" : [
    {
      "description" : "twitter",
      "link" : "https://twitter.com/kalasearch"
    },
    {
      "description" : "facebook",
      "link" : "https://www.facebook.com/kalasearch"
    },
    {
      "description" : "github",
      "link" : "https://github.com/kalaseasrch"
    }
  ]
}

要访问字符串 facebook,我们可以在点符号中调用数组中的该项:

alert(user_profile.social_media[1].description);
// Output
facebook

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

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

JSON 函数

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

JSON.stringify()

JSON.stringify() 函数将 JavaScript 对象转换为 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,那么可以看到它已经变成了一个字符串,而不是一个对象。

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

JSON.stringify() 函数允许我们将对象转换为字符串。与此相反,我们接下来看一看 JSON.parse() 函数。

JSON.parse()

字符串用于传输非常高效,但是你希望能够在客户端和或服务器端将它们转换回JSON对象。你可以使用eval()函数将文本转换为对象,但它不是很安全,所以我们直接用 JSON.parse() 函数。

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

var o = JSON.parse(s)

然后,我们将有对象 o 可使用,这个对象 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>
// Output
Name: Sammy Shark
Location: Ocean

在 HTML 中,我们可以看到 JSON 字符串 s 是如何被转换成一个对象的,这个对象可以在页面的最终呈现中通过点符号访问 JSON 来获得。

JSON.parse() 是解析 JSON 字符串并将其转换为对象的安全的函数,请注意千万不要用 eval 因为它会有一些安全漏洞。

总结

JSON 是 JavaScript 中使用的自然格式,并且在几乎所有语言中都有实现。所以在不同语言之间,传递 JSON 也是通行的做法。正是因为 JSON 容易使用和实现,并且很容易在编程语言和系统之间进行转换,因此在 API(包括 Twitter, Stripe API)方面,它的应用越来越广泛。我们在卡拉搜索的 API 中,也全部采用的 JSON 来与后端服务器交互。如果想了解更多的话,请参考 卡拉搜索文档

如果你需要在你的产品中实现搜索功能,请参考卡拉搜索,我们的搜索技术可以极大减轻你的开发负担,提升用户体验和开发效率。如果你是开发的话,不妨把卡拉搜索介绍给你的产品经理或 CTO

大概率来说,在写代码时你应该不太会创建一个 json 文件,而多数情况都是从 API 之类的地方,从后端服务器获取。熟练掌握 JSON 在 JS 里的使用,对于你与后端进行对接,将会大大提高效率。

友情链接更新日志© 2020, 卡拉搜索, Built with ❤️ in San Francisco + Beijing

京ICP备15049164号-3