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

迪鲁宾
546 阅读4分钟

JSON是JavaScript Object Notation的缩写。一个JSON文件的扩展名是.json，里面的数据用键：值对表示，就像一个传统的JavaScript对象。

不过，JSON和对象并不完全相同。核心区别是JSON中的键必须使用双引号，除了数字和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不支持诸如未定义、函数和日期等数据类型。

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

这种扩展的例子是GeoJSON和BSON。GeoJSON被用来表示地理数据，而BSON被流行的数据库服务提供商MongoDB使用。

例如，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() 方法返回一个JSON字符串，它与JavaScript对象完全相同。你可以将它与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数据声明为一个具有标识符（名称）的对象字面JSONData 。我们用JavaScript的JSON.stringify() 方法把它变成一个字符串，用DOM的查询选择器方法得到HTML中的空div。这样就可以用innerHTML DOM操作方法在其中填充JSON数据：

json-stringify-method

我们可以使用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-parse-method

结论

作为一个程序员，你不可能没有JSON。大多数API现在都是用JSON而不是XML编写的。

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

我希望本教程给你提供了与JSON打交道所需的见解，这样你就可以在遇到JSON时将其正确使用。

谢谢你的阅读，并继续编码。

avatar
文章
阅读
粉丝