什么是 JSON 文件？JavaScript 代码示例

2021-08-26 14:04:56 浏览数 (3)

JSON 代表 JavaScript 对象表示法。JSON 文件以 .json 为扩展名，其中的数据以键：值对表示，就像传统的 JavaScript 对象一样。不过，JSON 和对象并不完全相同。核心区别在于JSON中的key必须是双引号，除number和null之外的值也必须是双引号。如果您在编程过程中使用过 API，您可能知道什么是 JSON，因为现在很多 API 数据都采用 JSON 格式。如果您之前没有使用过 API 并且您是一个绝对的初学者，那么您并不孤单。在本文中，我将向您介绍 JSON 的全部内容以及如何充分利用它。

基本 JSON 语法

{
  "key1": "value1",
  "key2": "value2",
  "key3": "value3",
  "key4": 7,
  "key5": null,
  "favFriends": ["Kolade", "Nithya", "Dammy", "Jack"],
  "favPlayers": {"one": "Kante", "two": "Hazard", "three": "Didier"}
}

接受的 JSON 数据类型

JSON 可以定义在一个对象或一个数组中，它可能包含多个对象。因此，对象和数组是 JSON 中自动可接受的数据类型。它支持的其他数据类型是布尔值、空值和字符串。

JSON 不支持 undefined、function 和 date 等数据类型。

此外，JSON 还可以扩展为其他数据格式，这些格式可能接受原始 JSON 不接受的额外数据类型。

此类扩展的示例是 GeoJSON 和 BSON。GeoJSON 用于表示地理数据，而流行的数据库服务提供商 MongoDB 使用 BSON。

例如，BSON 接受正则表达式、日期和时间戳作为数据类型，而 JSON 不接受。

JSON 语法规则

JSON 在支持的数据类型方面非常严格。如果您在代码编辑器中安装了 linter，它会在您输入不受支持的数据类型或违反语法规则时立即通知您存在错误。

要知道的 JSON 语法规则：

  • 如果将文件表示为对象，则文件中的所有数据必须用大括号括起来，如果它是数组，则必须用方括号括起来。
  • 不允许单引号
  • 每个 JSON 中的键必须是唯一的，并且必须用双引号引起来
  • 数字不能用双引号括起来，否则它们将被视为字符串。
  • 空数据类型不能用双引号括起来。
  • 布尔值只能为真或假。
  • 除最后一项外，每个键值对都必须以逗号结尾
  • 数组中的特定对象也必须以逗号结尾。

JSON 数据如何发送到客户端（浏览器）

JSON 是出于将数据从服务器（例如数据库）实时发送到客户端（浏览器）的需要而创建的。

但是 JSON 数据不能以其原始的键值对形式传输到浏览器，因此编程语言有操作 JSON 数据的方法。

例如，在 JavaScript 中，JSON.parse()将 JSON 数据转换为对象，JSON.stringify()并将对象的键值对转换为 JSON 数据。

Python 提供了诸如json.loads()将现有字符串转换为 JSON 以及json.dumps()将对象转换为 JSON 字符串等方法。

您可以使用 JavaScript 提供的两种方法将基本 JSON 语法中的数据发送到浏览器。

如何使用 JavaScript 将 JSON 数据发送到客户端（浏览器）

该JSON.stringify()方法返回一个与 JavaScript 对象完全相同的 JSON 字符串。您可以将它与 DOM 操作方法结合使用以在浏览器中显示 JSON 数据，就像我在下面的代码片段中所做的那样：

<h2>Here is the Data from the JSON:</h2> 
<div id="json"></div>

 const JSONData = {
    "key1": "value1",
    "key2": "value2",
    "key3": "value3",
    "key4": 7,
    "key5": null,
    "favFriends": ["Kolade", "Nithya", "Dammy", "Jack"],
    "favPlayers": {"one": "Kante", "two": "Hazard", "three": "Didier"}
}

const JSONString = JSON.stringify(JSONData)
const JSONDisplay = document.querySelector("#json")
JSONDisplay.innerHTML = JSONString

在 JavaScript 代码中，我们将 JSON 数据声明为带有标识符 (name) 的对象字面量JSONData。我们使用 JavaScript 的JSON.stringify()方法将其转换为字符串，并使用 DOM 的查询选择器方法获取 HTML 中的空 div。这使得使用innerHTMLDOM 操作方法填充其中的 JSON 数据成为可能。

json-stringify-方法

我们可以使用该JSON.parse()方法将 JSON 数据转换为对象——它正在运行：

<h2>Here is the Data from the JSON:</h2>
<div id="json"></div>

const JSONData =
     '{"name": "Kolade", "favFriends": ["Kolade", "Nithya", "Rocco", "Jack"], "from": "Africa"}';

   try {
     const JSONString = JSON.parse(JSONData);
     const JSONDisplay = document.querySelector("#json");
     JSONDisplay.innerHTML = JSONString.name + ", [" + JSONString.favFriends + "], " + JSONString.from;
   } catch (error) {
     console.log("Cannot parse the JSON Data");
   }

浏览器中的结果输出如下所示：

json解析方法

结论

作为程序员，您离不开 JSON。现在大多数 API 都是用 JSON 而不是 XML 编写的。

JSON 最初是为 JavaScript 设计的，但由于其独立于语言的特性，现在许多其他编程语言都支持它。因此，许多语言都有使用它的库。

我希望本教程为您提供了使用 JSON 所需的见解，以便您在遇到它时可以正确使用它。

更多有用的编程知识请多多关注W3Cschool。


JavaScript

0 人点赞