JSON（JavaScript Object Notation，JavaScript 对象表示法）因其简单灵活而成为 web 开发和移动应用程序中常用的数据交换格式。

但 JSON 文件本身并不支持注释。这使得为数据提供额外的上下文或解释具有挑战性。

本文将向你介绍如何在 JSON 文件中包含注释，以及 JSON 本身不支持注释的原因。

为什么 JSON 不支持注释

根据 JSON 规范，JSON 文档只应包含数组和对象等数据结构，而不应包含注释。这是因为 JSON 是一种简单的、易于解析的数据格式，可以快速有效地进行处理。

注释虽然有助于为人类读者提供额外的上下文或解释，但会增加解析过程的复杂性。这会降低性能并增加出错的风险。

JSON 不支持注释的主要原因是，其创建者道格拉斯·克罗克福特（Douglas Crockford）特意从格式中删除了注释，以防止误用并使其保持为纯数据格式。

克罗克福特观察到有些人使用注释来存储解析指令，这可能会破坏不同系统之间的兼容性。因此，他决定删除注释，以保持格式在各种编程语言和环境中的简洁性和一致性。

因此，在 JSON 文件中添加注释的唯一选择就是使用变通方法，例如使用自定义元素来存储注释。

如何在 JSON 中添加注释

当你以常用编程语言中使用的 //、# 或 /* */ 的形式添加注释时，你会发现 “JSON 中不允许添加注释 ”的错误。

那么，如何在 JSON 文件中添加注释呢

唯一的办法就是在 JSON 文件中将注释作为数据对加入。这种做法并不常用，也不值得推荐，但严格来说，这是添加注释到 JSON 文件的最佳方法。

在 JSON 对象中创建一个自定义元素（如 “_comment”），以便将注释与其他数据区分开来。

{
    "_comment": "Put your JSON comment here"
    "name": "John Doe",
    "age": 35,
    "city": "New York City",
    "isMarried": true,
    "occupation": "Software Engineer",
}

注意：并非必须使用下划线。你可以决定使用两个斜线，如 “//comment” 或任何其他允许的字符。这样做的目的是为了明确这是一个注释。

值得注意的是，这种方法可能会使 JSON 文件变得更加复杂和难以解析。但如果将注释添加为自定义元素，服务器端就会像接收和处理 JSON 中的其他数据一样接收和处理它们。

你现在知道如何在 JSON 文件中添加注释了。但如何添加多个注释呢？这是有可能的，但你要记住，JSON 不允许对象键重复。你必须在注释元素中包含唯一的字母或数字，确保其有效并能与 JSON 文件中的其他元素区分开来。

{
    "_comment1": "This is the basic data",
    "name": "John Doe",
    "age": 35,
    "city": "New York City",
    "_comment2": "Marital information",
    "isMarried": true,
    "wifeName": "Jane Doe"
}

当你嵌套 JSON 对象时，可以使用类似的对象键：

{
    "_comment": "This is the basic data",
    "name": "John Doe",
    "age": 35,
    "city": "New York City",
    "maritalInfo": {
        "_comment": "Marital information",
        "isMarried": true,
        "wifeName": "Jane Doe"
    }
}

小结

你现在知道如何在 JSON 文件中添加注释了。但是，由于这些注释也会被处理并可被访问，因此在使用自定义元素向 JSON 文件添加注释时需要小心谨慎。

感谢你阅读本文，祝你编码愉快！

互联网上使用的每个资源都有一个媒体类型，也被称为 MIME 类型，意思是 Multipurpose Internet Mail Extension 多用途互联网邮件扩展。这些信息对于服务器和客户端之间的通讯是必要的。

浏览器需要知道发送给它的资源的媒体类型，以便它能够正确地处理它们。

服务器也是如此。它需要知道发送给它的资源的类型，以便进行准确的解析和处理。

内容类型是在哪里声明的？

任何资源的媒体类型都在请求头（在客户端，当向服务器发出请求时）的 Content-Type 属性或响应头（在服务器，当发送响应时）中声明。

如果不明确声明资源的内容类型，客户端可能试图自动检测类型，但结果可能不准确，所以明确声明它是很重要的。

媒体类型

媒体类型以各种形式存在。它们被划分为不同的组别：

• 应用
• 音频
• 字体
• 例子
• 图像
• 信息
• 模型
• 多部分
• 文本
• 视频

这些类别也有其类型。例如，application/json 是 application 下的一个类型，text/html 是 text 下的一个类型。

你可以在 IANA（一个协调互联网上一些关键元素的主体）媒体类型中找到一个完整的媒体类型列表。

所有这些类型涵盖了各种数据类型，如文本、音频、图像、HTML，以及更多在互联网上使用的类型。

浏览器需要知道一个资源的媒体类型

正如我上面提到的，浏览器需要知道它收到的内容是什么类型。这里有一个例子可以说明这一点。

下面的代码是一个用于 HTML 文件的 Node 服务器：

const http = require("http");
const fs = require("fs");
const path = require("path");

const server = http.createServer(function (req, res) {
	const filePath = path.join(__dirname, "index.html");
	var stat = fs.statSync(filePath);

	res.writeHead(200, {
		"Content-Type": "text/css",
		"Content-Length": stat.size,
	});

	const readStream = fs.createReadStream(filePath);
	readStream.pipe(res);
});

server.listen(5000);

console.log("Node.js web server at port 5000 is running..");

不要担心代码的具体细节。你所关心的只是我们正在提供的 index.html 文件，以及内容类型是 text/css。

下面是 index.html 的内容：

<h1>Homepage</h1>

当然，HTML 文档与 CSS 文件是不同的。下面是服务器启动时在 localhost:5000 上的结果。

你也可以通过检查 DevTools 的 network 标签中的 header 信息来确认得到的响应。

下面是在 Chrome 浏览器上的结果：

浏览器得到的内容是一种 CSS 类型，因此，它试图将其作为 CSS 处理。

另外，请注意，完全了解浏览器得到的内容类型也会减少安全漏洞，因为浏览器知道要为这些数据制定的安全标准。

现在你了解了 MIME 类型的概念和它们的重要性，让我们来看看 JSON。

正确的 JSON 内容类型

JSON 必须被浏览器正确解释才能被适当使用。text/plain 通常用于JSON，但根据 IANA，JSON 的官方 MIME 类型是 application/json。

这意味着当你向服务器发送 JSON 或从服务器接收 JSON 时，你应该始终将 header 的内容类型声明为 application/json，因为这是客户端和服务器理解的标准。

总结

如上所述，服务器（就像浏览器一样）需要知道发送给它的数据类型，例如，在一个 POST 请求中。这就是为什么带有文件的 forms 通常包含 enctype 属性，其值为 multipart/form-data。

如果不以这种方式对请求进行编码，POST 请求就不会工作。另外，一旦服务器知道它得到的数据类型，它就知道如何解析编码后的数据。

在这篇文章中，我们看了什么是 MIME 类型以及它们的用途。此外，我们还看了 JSON 的内容类型。我希望你现在知道为什么在互联网上使用时声明资源类型很重要。

JSON（JavaScript Object Notation）是一种流行的数据交换格式。它在互联网应用、API、和数据库中被广泛应用。它是一种轻量的、人类可读的格式，易于解析和生成。

但是当处理巨大和复杂的JSON数据时，读取和理解数据的结构变得复杂，因此我们需要代码美化（pretty print）。代码美化是通过格式修改，将JSON数据变得容易阅读容易理解的过程。

在这篇文章里，我们会探索如何通过自带和第三方代码库，在Python中代码美化JSON。我们也会讨论代码美化JSON的最佳方法，以及它的用例。

代码美化是什么意思

在Python中，“代码美化”是指格式化和展示数据结构，来使得它们更加可读更加有条理。这些数据结构包括链表、字典和元组等等。

为了在Python中代码美化JSON，我们可以使用内置的json模块。这个模块提供了dump()函数。它可以通过序列化使Python对象成为一个JSON格式的字符串。

默认情况下，此函数生成一个没有任何格式的JSON字符串，但我们可以使用indent参数来指定用于缩进的空格数。

以下是一个如何在Python中代码美化JSON的例子：

import json

# JSON数据样本
data = {
    "name": "John",
    "age": 30,
    "city": "New York"
}

# 将数据转换为JSON格式的字符串，其中包含4个空格的缩进
json_str = json.dumps(data, indent=4)

# 打印代码美化过的JSON字符串
print(json_str)

输出：

{
    "name": "John",
    "age": 30,
    "city": "New York"
}

如你所见，“indent”参数设置为“4”，它就会生成一个JSON字符串，其中每个级别的嵌套都缩进了四个空格。我们可以调整这个参数来控制输出中的缩进量。

注意 json.dumps() 函数也可以接受其它可选的参数, 比如说sort_keys，它可以被用来排列JSON输出中的键。你可以阅读json模块的文献来获取该函数的更多信息。

代码美化JSON的最佳实践

使用json模块

json模块是一个Python内置的模块, 它提供了处理JSON数据的很多方法。json.dumps()方法被用于将Python对象序列化成一个JSON格式的字符串。json.dumps()方法也可以接受indent参数。这个参数可以被用于指明缩进的空格数。

以下是一个例子：

import json

data = {
    "name": "John",
    "age": 30,
    "city": "New York"
}

json_str = json.dumps(data, indent=4)
print(json_str)

输出：

{
    "name": "John",
    "age": 30,
    "city": "New York"
}

使用pprint模块

pprint模块是一个Python内置的模块，它提供了一种代码美化Python数据结构的方式。它也可以处理JSON数据。pprint.pprint()方法被用来代码美化JSON数据。

以下是一个例子：

import json
import pprint

data = {
    "name": "John",
    "age": 30,
    "city": "New York"
}

pprint.pprint(data)

输出：

{'age': 30, 'city': 'New York', 'name': 'John'}

使用第三方代码库

在Python里，有很多用于代码美化JSON数据的第三方代码库，比如说simplejson、ujson和 json5。这些库提供了其他功能，比如更快的序列化和反序列化、对其他数据类型的支持以及更灵活的格式化选项。

以下是一个使用simplejson的例子:

import simplejson as json

data = {
    "name": "John",
    "age": 30,
    "city": "New York"
}

json_str = json.dumps(data, indent=4, sort_keys=True)
print(json_str)

输出：

{
    "age": 30,
    "city": "New York",
    "name": "John"
}

在Python中代码美化的用例

1.调试JSON数据：在处理JSON数据时，如果数据格式不好，读取和理解数据的结构可能会很困难。用Python代码美化JSON数据可以帮助我们快速识别数据中的任何问题，并更有效地调试代码。

2.在用户界面中显示JSON数据：如果我们正在构建一个向用户显示JSON数据的web应用程序或移动端应用程序，那么代码美化可以通过使数据更具可读性和可呈现性来增强用户体验。

3.与团队成员共享JSON数据：如果我们正在与其他团队成员一起处理一个项目，并且需要与他们共享JSON数据，那么代码美化数据可以让他们更容易地理解并使用数据。

4.记录JSON数据：如果我们在Python应用中记录JSON数据，那么代码美化数据可以使读取和分析记录变得更容易。

总结

对任何处理JSON数据的人来说，在Python中代码美化JSON都是一个十分重要的技能。

在这个教学中，我们学习了如何在Python中使用json模块来代码美化JSON，也学习了pprint模块。通过短短的几行代码，我们可以生成格式清晰的JSON输出，以方便我们阅读和导航。

在Twitter和LinkedIn和我建立联系吧。你也可以订阅我的YouTube频道。

Happy Coding!

从开始学习JSON Web令牌（JWT），我就一直很好奇，它是如何被验证的。

我了解我们签名了令牌，并且使用签名后的令牌来验证真实性。但是我还是特别好奇以及为什么我之前没有去了解内部的细节。

希望这篇文章可以帮助你理解签名JWT是如何运作的，你是如何签名和验证令牌的。

什么是JWT？

在我们正式开始之前，让我们快速回顾一下JSON Web令牌到底是什么。

JSON Web令牌（JWT）是一种在两方之间紧凑的、URL安全的传输数据的方式。

它由开放标准（RFC 7519）定义，并由三个部分组成：header（头部）、payload（负载）以及一个加密部分。

JWT在生成时会被签名，相同的签名JWT在收到时会被验证，以确保它在传输过程中没有被修改。

如果你想要了解JWT的细节，我推荐你阅读我的博文——JSON Web令牌（JWT）以及我们为什么使用它.

为什么你不需要知道签名和验证是如何工作的？🤔

现在的问题是，为什么大部分的JWT资源都会说“然后你签名并验证”就没有别的信息了？答案是因为这些信息很抽象。

就好比当你在开车的时候，你并不需要知道引擎是如何工作的，或者也不需要靠自己来调整引擎，使汽车运行得更好。

相反，你信任制造商利用他们的专业、并且尽责为你制造了对你有用的产品。

同样的，你也不需要了解签名和验证JWT的流程是什么，就可以高效地使用它来验证和授权你的应用和API。

请注意你大概率是不需要自己签名和验证令牌的，但了解背后的原理能够帮助你更有信心地使用JWT。但总的来说，身份供应商和身份（Identity-as-a-Service ）即服务平台（如 Auth0、Okta 和 Microsoft Active Directory）可确保此过程很简单。

如果你仍对它是如何运作的感兴趣（和我一样），欢迎你继续阅读。

JSON Web令牌由什么组成？🤔

我在这篇教程中做了深入的介绍，但是让我们快速回顾一下。

JSON Web令牌由三段URL安全的字符串并用句号 .连接组成。

JWT的Header（头部）部分

第一个部分是头部，如下：

eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9

头部是一个JSON对象，包含了一个签名算法和一个令牌类型。它是由base64Url编码而成。

解码后如下：

{
  "alg": "RS256",
  "typ": "JWT"
}

JWT的Payload（负载）部分

第二部分是负载：

eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0

这是一个包含数据声明的JSON对象，其中包含有关用户的信息和其他与身份验证相关的信息。

是JWT从一个实体传递到另一个实体的信息。它也是base64Url编码的。数据声明如下所示：

{
  "sub": "1234567890",
  "name": "John Doe",
  "admin": true,
  "iat": 1516239022
}

JWT的加密/签名部分

最后一部分是加密/签名部分。JWT被签名之后不能在传输的过程中被修改。一旦一个授权的服务器发行了一个令牌，就使用密匙来签名。

当客户端接收到ID的令牌，也通过密匙来验证签名。

签名算法不同，使用的密钥也会有所不同。如果使用的是非对称签名算法，则使用不同的密钥进行签名和验证。在这种情况下，只有授权服务器能够签名令牌。

JWT中的签名和验证是如何运作的？🤔

如何签名一个JWT？

在这篇文章中，我将使用RS256签名算法。RS256是使用SHA-256的RSA电子签名。

SHA-256是一种非对称密钥加密算法，它使用一对密钥：一个公钥和一个私钥来加密和解密。

在这里，授权服务器将使用私钥，而接收令牌以验证它的应用程序将使用公钥。

签名输入

首先让我来看看JWT的前两个部分（头部和负载），如下：

eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0

基本上就是一个由base64url编码的头部和负载，并且由 .连接。

base64UrlEncode(header) + "." 
+ base64UrlEncode(payload)

以上就是签名输入。

对签名输入做哈希加密

然后我们使用SHA-256哈希算法对签名输入进行加密。哈希将一个值转换为另一个不同的值。哈希函数使用数学算法从现有值生成新值。

注意:

• 哈希是不可逆的，一旦我们将输入哈希之后，就无法再次获取原有的输入。
• 如果输入相同，哈希后的结果始终相同。
• 不存在两个不同的哈希输入产出相同的结果。

SHA-256 (
    base64UrlEncode(header) + "." 
    + base64UrlEncode(payload)
)

现在我们就拥有了哈希后的头部和负载部分，可以用此和其他的哈希结果比较，但是不能逆转返回到最初的签名输入。

加密签名输入

接下来，我们给哈希后的签名输入加密。和哈希不同的是，加密是可逆的。授权服务器使用加密私钥给哈希后的签名加密，产生一个结果。

这个最终结果（哈希过、加密过、头部和负载编码后）就是JWT的加密/签名部分。

RSA (
    SHA-256 (
        base64UrlEncode(header) + "." 
        + base64UrlEncode(payload)
    ),
    {RSA Private Key}
)

这就是JSON Web令牌产生的过程。

如何验证JWT？

现在你知道令牌是如何签名的，我们可以进一步了解当收到令牌后，如何验证这个JWT是没有被篡改的。

假设有一个接受JWT的应用，并且需要验证JWT。这个应用也可以访问授权服务器的公钥。

JWT的验证是为了达到一个目的：即我们可以有效地将我们收到的与我们期望的进行比较。

解码声明

应用可以对头部和负载解码来获取信息。

请记住，这两个段是用base64Url编码，以使它们是URL安全的。这并不是密码学维度的安全。

你可以使用简单的在线base64解码工具来解码。一旦被解码，我们就可以轻松地读取其中的信息。

例如，我们可以解码头部，看看JWT说它是用什么算法签名的。

解码后的头部如下：

{
  "alg": "RS256",
  "typ": "JWT"
}

当我们读取JWT头部的算法后，我们应该验证它是否和我们期待的配置匹配，如果不匹配，就马上拒绝这个令牌。

哈希加密（再次）

如果令牌中的算法符合我们的期望（即使用RS256算法），我们需要生成头部和负载的SHA-256哈希。

请记住，哈希是不可逆的，但相同的输入总是会产生相同的输出。所以我们将哈希连接在一起的、由base64Url编码的头部和负载。现在我们在应用程序端重新哈希计算签名输入。

解密

哈希签名输入也在JWT的签名中，但它已由授权服务器使用私钥加密。应用程序可以访问公钥，因此我们可以解密签名。

完成此操作后，我们就可以访问原始哈希：第一次生成令牌时由授权服务器生成的哈希。

对比哈希值

现在我们可以将解密的哈希与计算的哈希进行比较。如果它们相同，那么我们验证JWT头部和负载段中的数据在授权服务器创建令牌到应用程序收到它的之间没有被修改。

验证令牌声明

此外，一旦我们验证了签名，我们就可以验证JSON Web令牌的数据。也可以验证负载段中的声明，因为它包含有关令牌颁发者、令牌到期时间、令牌的目标受众、令牌绑定到授权请求的信息等。

这些声明为应用程序提供了签名验证以外的详细信息。

例如，对声明的检查可以揭示技术上有效的令牌实际上是为不同的应用程序或用户准备的、它已经过期、它来自与该应用程序无关的发行者等等。

总结

我们已经介绍完毕JWT是如何签名和验证的，希望可以帮助你更好地理解JWT并且使用它。我想再重复一次，你不需要自己来签名和验证JWT。

有Auth0、 Okta、Ping Identity等身份平台帮助你完成。他们也提供应用端和API端的SDK、验证库和令牌管理系统。

如果你对使用Auth0感兴趣，你需要注册一个账号。你可以免费在这里注册。

感谢阅读！希望你觉得这篇文章对你有帮助，我也很感兴趣收听你的想法，回答你的问题。如果你觉得本文对你有帮助，请你转发给其他人。

感谢阅读！:)

P.S 欢迎在LinkedIn或Twitter联系我。

附录

以下是撰写这篇文章我参考的资料：

• Signing and Validating JSON Web Tokens (JWT) For Everyone 作者：Kim Maida
• JSON Web Token (JWT) Signing Algorithms Overview 来自Auth0

在本文中，你将学习如何在 Python 中读取和解析 JSON。

什么是 JSON

JSON 是 JavaScript Object Notation 的缩写。这是一种以名称-值对的形式存储数据的简单语法。值可以是各种有效的数据类型。 JSON 不可接受的类型包括函数、日期和 undefined。

JSON 文件以具有有效 JSON 结构的 .json 扩展名存储。

以下是 JSON 文件的结构：

{
  "name": "John",
  "age": 50,
  "is_married": false,
  "profession": null,
  "hobbies": ["traveling", "photography"]
}

你将经常使用 JSON 在 Web 应用程序中从服务器发送和接收数据。

收到数据后，程序读取并解析 JSON 以提取特定数据。不同的语言有不同的方法来做到这一点。我们将在此处了解如何在 Python 中执行这些操作。

如何读取 JSON 文件

假设上面代码块中的 JSON 存储在 user.json 文件中。使用 Python 中的 open() 内置函数，我们可以读取该文件并将内容分配给一个变量，就是这样：

with open('user.json') as user_file:
  file_contents = user_file.read()
  
print(file_contents)
# {
#   "name": "John",
#   "age": 50,
#   "is_married": false,
#   "profession": null,
#   "hobbies": ["travelling", "photography"]
# }

你将文件路径传递给 open 方法，该方法打开文件并将文件中的流数据分配给 user_file 变量。使用 read 方法，你可以将文件的文本内容传递给 file_contents 变量。

我在表达式的开头使用了 with，以便在读取文件内容后，Python 可以关闭文件。

file_contents 现在包含 JSON 的字符串版本。下一步，你可以解析 JSON 了。

如何解析 JSON

Python 具有用于各种操作的内置模块。为了管理 JSON 文件，Python 有 json 模块。

该模块带有许多方法。其中之一是用于解析 JSON 字符串的 load() 方法。然后，你可以将解析后的数据分配给如下变量：

import json

with open('user.json') as user_file:
  file_contents = user_file.read()
  
print(file_contents)

parsed_json = json.loads(file_contents)
# {
#   'name': 'John',
#   'age': 50,
#   'is_married': False,
#   'profession': None,
#   'hobbies': ['travelling', 'photography']
# }

使用 load() 方法，你可以看到 parsed_json 变量现在有一个有效的字典。从此字典中，你可以访问其中的键和值。

另请注意 JSON 中的 null 如何在 Python 中转换为 None。这是因为 null 在 Python 中无效。

如何使用 json.load() 读取和解析 JSON 文件

json 模块还具有 load 方法，你可以使用它来读取文件对象并同时对其进行解析。使用此方法，你可以将之前的代码更新为：

import json

with open('user.json') as user_file:
  parsed_json = json.load(user_file)

print(parsed_json)
# {
#   'name': 'John',
#   'age': 50,
#   'is_married': False,
#   'profession': None,
#   'hobbies': ['travelling', 'photography']
# }

不使用文件对象的 read 方法和 json 模块的 loads 方法，你可以直接使用读取和解析文件对象的 load 方法。

小结

JSON 数据以其简单的结构而闻名，并且在服务器和客户端之间的信息交换中很受欢迎（在大多数情况下是一种标准）。

不同的语言和技术可以以不同的方式读取和解析 JSON 文件。在本文中，我们学习了如何读取 JSON 文件并使用文件对象的 read 方法以及 json 模块的 load 方法解析此类文件。

JSON，即JavaScript对象符号（JavaScript Object Notation），就在我们身边。如果你曾经使用过一个网络应用，它很有可能使用JSON在其服务器和你的设备之间构建、存储和传输数据。

在这篇文章中，我们将简要介绍JSON和JavaScript的区别，然后跳到在浏览器和Node.js项目中用JavaScript解析JSON的不同方法。

JSON和JavaScript之间的区别

虽然JSON看起来像普通的JavaScript，但最好把JSON看作一种数据格式，类似于文本文件。恰好JSON的灵感来自于JavaScript语法，这就是为什么它们看起来如此相似。

让我们来看看JSON对象和JSON数组，并将它们与它们的JavaScript对应物进行比较。

JSON对象与JavaScript对象字面意义（Object Literals）

首先，这里有一个JSON对象:

{
  "name": "Jane Doe",
  "favorite-game": "Stardew Valley",
  "subscriber": false
}

jane-profile.json

JSON对象和普通的JavaScript对象（也叫对象字面 object literal）的主要区别在于引号。JSON对象中的所有键和字符串类型的值都必须用双引号（"）来包裹。

JavaScript对象字面意义更灵活一些。对于对象字面意义，你不需要用双引号来包裹键和字符串。相反，你可以使用单引号（'），或者不对键值使用任何类型的引号。

下面是上面的代码作为一个JavaScript对象字面:

const profile = {
  name: 'Jane Doe',
  'favorite-game': 'Stardew Valley',
  subscriber: false
}

注意，键"'favorite-game'"是用单引号包裹的。对于对象字面，你需要用引号来包装那些由破折号（-）分隔的字的键。

如果你想避免引号，你可以重写键，使用骆驼字母大小写（favoriteGame），或者用下划线来分隔单词（`favorite_game'）。

JSON数组 vs JavaScript数组

JSON数组的工作方式与JavaScript中的数组基本相同，可以包含字符串、布尔值、数字和其他JSON对象。比如说:

[
  {
    "name": "Jane Doe",
    "favorite-game": "Stardew Valley",
    "subscriber": false
  },
  {
    "name": "John Doe",
    "favorite-game": "Dragon Quest XI",
    "subscriber": true
  }
]

profiles.json

下面是在普通JavaScript中可能出现的情况:

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

JSON作为一个字符串

你可能会想，如果有JSON对象和数组，你就不能在你的程序中像普通的JavaScript对象字面或数组一样使用它吗？

不能这样做的原因是，JSON实际上只是一个字符串。

例如，当你在一个单独的文件中写JSON时，如上面的jane-profile.json或profiles.json，该文件实际上包含了JSON对象或数组形式的文本，它恰好看起来像JavaScript。

如果你向API发出请求，它将返回类似这样的东西:

{"name":"Jane Doe","favorite-game":"Stardew Valley","subscriber":false}

就像文本文件一样，如果你想在你的项目中使用JSON，你需要把它解析或改变成你的编程语言可以理解的东西。例如，在Python中解析一个JSON对象将创建一个字典。

有了这种理解，让我们看看在JavaScript中解析JSON的不同方法。

如何在浏览器中解析JSON

如果你在浏览器中使用JSON，你可能是通过API接收或发送数据。

让我们看一下几个例子。

如何用fetch解析JSON

从API获取数据的最简单方法是使用fetch，它包括.json()方法，将JSON响应自动解析为可用的JavaScript对象字面或数组。

下面是一些代码，使用 fetch 从对一个对开发者免费的 Chuck Norris Jokes API平台，发出 GET 请求:

fetch('https://api.chucknorris.io/jokes/random?category=dev')
  .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal
  .then(data => console.log(data));

如果你在浏览器中运行这段代码，你会看到像这样的东西记录在控制台中:

{
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
}

虽然这看起来像一个JSON对象，但它实际上是一个JavaScript对象字面，你可以在你的程序中自由使用它。

如何用JSON.stringify()对JSON进行字符串化处理

但是，如果你想把数据发送到API呢？

例如，假设你想发送一个 Chuck Norris 的joke 到 Chuck Norris Jokes API，以便其他人以后可以阅读它。

首先，你要把 joke 写成一个JS对象的字面意思:

const newJoke = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

然后，由于你要向API发送数据，你需要把你的newJoke对象字面意思变成一个JSON字符串。

幸运的是，JavaScript包含了一个超级有用的方法来做到这一点-JSON.stringify():

const newJoke = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

console.log(JSON.stringify(newJoke)); // {"categories":["dev"],"value":"Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."}

console.log(typeof JSON.stringify(newJoke)); // string

虽然我们在这个例子中把一个对象的字面意思转换成JSON字符串，但是JSON.stringify()也适用于数组。

最后，你只需要用POST请求将你的JSON字符串化的 joke 送回给API。

请注意，Chuck Norris joke API 实际上并没有这个功能。但是，如果它有的话，下面是代码可能会出现的情况:

const newJoke = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

fetch('https://api.chucknorris.io/jokes/submit', { // fake API endpoint
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(newJoke), // turn the JS object literal into a JSON string
})
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => {
    console.error(err);
  });

就这样，你用fetch解析了传入的JSON，并使用JSON.stringify()将JSON对象字面意思转换成JSON字符串。

如何在浏览器中处理本地JSON文件

不幸的是，在浏览器中加载一个本地JSON文件是不可能的（或者说是不可取的）。

如果你试图加载一个本地文件，fetch将抛出一个错误。例如，假设你有一个JSON文件，里面有一些 jokes:

[
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
  },
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "ae-78cogr-cb6x9hluwqtw",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/ae-78cogr-cb6x9hluwqtw",
    "value": "There is no Esc key on Chuck Norris' keyboard, because no one escapes Chuck Norris."
  }
]

jokes.json

而你想解析它并在一个简单的HTML页面上创建一个 jokes 列表。

如果你用以下内容创建一个页面并在浏览器中打开它:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />
    <title>Fetch Local JSON</title>
  </head>
  <script>
    fetch("./jokes.json", { mode: "no-cors" }) // disable CORS because path does not contain http(s)
      .then((res) => res.json())
      .then((data) => console.log(data));
  </script>
</html>

index.html

你会在控制台中看到这个:

Fetch API cannot load file://<path>/jokes.json. URL scheme "file" is not supported

默认情况下，出于安全考虑，浏览器不允许访问本地文件。这是一件好事，你不应该试图绕过这种行为。

相反，最好的办法是将本地的JSON文件转换成JavaScript。幸运的是，这很容易，因为JSON的语法与JavaScript非常相似。

你所需要做的就是创建一个新的文件并将你的JSON声明为一个变量:

const jokes = [
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
  },
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "ae-78cogr-cb6x9hluwqtw",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/ae-78cogr-cb6x9hluwqtw",
    "value": "There is no Esc key on Chuck Norris' keyboard, because no one escapes Chuck Norris."
  }
]

jokes.js

并把它作为一个单独的脚本添加到你的页面上:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />
    <title>Fetch Local JSON</title>
  </head>
  <script src="jokes.js"></script>
  <script>
    console.log(jokes);
  </script>
</html>

你将能够在你的代码中自由使用jokes数组。

你也可以使用 JavaScript modules 来做同样的事情，但这有点超出了本文的范围。

但如果你想处理本地的JSON文件，并安装了Node.js，该怎么办？让我们现在来看看如何做到这一点。

如何在Node.js中解析JSON

Node.js是一个JavaScript运行时，允许你在浏览器之外运行JavaScript。你可以在这里阅读关于 Node.js 的所有内容。

无论你是使用Node.js在你的电脑上本地运行代码，还是在服务器上运行整个网络应用，知道如何处理JSON都是很好的。

在下面的例子中，我们将使用同一个jokes.json文件:

[
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
  },
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "ae-78cogr-cb6x9hluwqtw",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/ae-78cogr-cb6x9hluwqtw",
    "value": "There is no Esc key on Chuck Norris' keyboard, because no one escapes Chuck Norris."
  }
]

jokes.json

如何用require()解析一个JSON文件

让我们从最简单的方法开始。

如果你有一个本地的JSON文件，你需要做的就是使用require()来加载它，就像其他Node.js模块。:

const jokes = require('./jokes.json');

JSON文件将自动为你解析，你可以开始在你的项目中使用它:

const jokes = require('./jokes.json');

console.log(jokes[0].value); // "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."

注意，这是同步的，意味着你的程序将停止，直到它解析了整个文件才继续。真正大的JSON文件会导致你的程序变慢，所以要小心处理。

另外，因为用这种方式解析JSON会将整个文件加载到内存中，所以最好对静态JSON文件使用这种方法。如果JSON文件在你的程序运行时发生了变化，你将无法获得这些变化，直到你重新启动你的程序并解析更新的JSON文件。

如何用fs.readFileSync()和JSON.parse()来解析JSON文件

这是在Node.js项目中解析JSON文件的比较传统的方式（因为缺乏更好的术语）--用fs（文件系统）模块读取文件，然后用JSON.parse()进行解析。

让我们看看如何用fs.readFileSync()方法做到这一点。首先，将fs模块添加到你的项目中:

const fs = require('fs');

然后，创建一个新的变量来存储jokes.json文件的输出，并设置它等于fs.readFileSync():

const fs = require('fs');
const jokesFile = fs.readFileSync();

fs.readFileSync()需要几个参数。第一个是你想要读取的文件的路径:

const fs = require('fs');
const jokesFile = fs.readFileSync('./jokes.json');

但如果你现在把jokesFile记录到控制台，你会看到这样的东西:

<Buffer 5b 0a 20 20 7b 0a 20 20 20 20 22 63 61 74 65 67 6f 72 69 65 73 22 3a 20 5b 22 64 65 76 22 5d 2c 0a 20 20 20 20 22 63 72 65 61 74 65 64 5f 61 74 22 3a ... 788 more bytes>

这只是意味着fs模块正在读取文件，但它不知道文件的编码或格式。fs可以用来加载几乎任何文件，而不仅仅是基于文本的文件，如JSON，所以我们需要告诉它文件的编码方式。

对于基于文本的文件，编码通常为 utf8:

const fs = require('fs');
const jokesFile = fs.readFileSync('./jokes.json', 'utf8');

现在如果你把jokesFile记录到控制台，你会看到文件的内容。

但是到目前为止，我们只是在读取文件，而且它还是一个字符串。我们需要使用另一种方法将jokesFile解析为可用的JavaScript对象或数组。

要做到这一点，我们将使用JSON.parse():

const fs = require('fs');
const jokesFile = fs.readFileSync('./jokes.json', 'utf8');
const jokes = JSON.parse(jokesFile);

console.log(jokes[0].value); // "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."

顾名思义，JSON.parse()接收一个JSON字符串，并将其解析为一个JavaScript对象字面或数组（object literal or array）。

和上面的require'方法一样，fs.readFileSync()'是一个同步方法，这意味着如果你的程序正在读取一个大文件，不管是JSON还是其他文件，它可能会导致你的程序变慢。

另外，它只读取一次文件并将其加载到内存中。如果文件有变化，你需要在某个时候再次读取该文件。为了使事情更简单，你可能想创建一个简单的函数来读取文件。

以下是可能出现的情况:

const fs = require('fs');
const readFile = path => fs.readFileSync(path, 'utf8');

const jokesFile1 = readFile('./jokes.json');
const jokes1 = JSON.parse(jokesFile1);

console.log(jokes1[0].value); // "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."

// the jokes.json file changes at some point

const jokesFile2 = readFile('./jokes.json');
const jokes2 = JSON.parse(jokesFile2);

console.log(jokes2[0].value); // "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."

如何用fs.readFile()和JSON.parse()来解析JSON？

fs.readFile()方法与fs.readFileSync()非常相似，只是它是异步工作。如果你有一个大文件要读，而你又不想让它耽误你的其他代码，这就很好。

下面是一个基本的例子:

const fs = require('fs');

fs.readFile('./jokes.json', 'utf8');

到目前为止，这看起来和我们对fs.readFileSync()所做的相似，只是我们没有把它分配给一个像jokesFile这样的变量。因为它是异步的，在fs.readFile()之后的任何代码都会在它完成读取文件之前运行。

相反，我们将使用一个回调函数并解析其中的JSON:

const fs = require('fs');

fs.readFile('./jokes.json', 'utf8', (err, data) => {
  if (err) console.error(err);
  const jokes = JSON.parse(data);

  console.log(jokes[0].value);
});

console.log("This will run first!");

它在控制台中打印出以下内容:

This will run first!
Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris.

就像fs.readFileSync()一样，fs.readFile()将文件加载到内存中，这意味着如果文件有变化，你需要再次读取文件。

另外，尽管fs.readFile()是异步的，但它最终会将它所读取的整个文件加载到内存中。如果你有一个巨大的文件，最好是研究一下 Node.js streams。

如何在Node.js中用JSON.stringify()对JSON进行字符串化

最后，如果你用Node.js解析JSON，很有可能在某些时候需要返回JSON，也许是作为一个API响应。

幸运的是，这与浏览器中的工作方式相同--只需使用JSON.stringify()将JavaScript对象字头或数组转换成JSON字符串:

const newJoke = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

console.log(JSON.stringify(newJoke)); // {"categories":["dev"],"value":"Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."}

我们已经涵盖了关于在浏览器和Node.js项目中使用JSON所需要知道的一切。

现在你可以去解析或字符串化JSON，以满足你的需求。

我还有什么遗漏？你是如何在你的项目中解析JSON的？请在 Twitter 上告诉我。

JSON，即JavaScript对象符号（JavaScript Object Notation），我们常常会用到它。如果你曾经使用过一个网络应用，它很有可能使用JSON在其服务器和你的设备之间构建、存储和传输数据。

在这篇文章中，我们将简要介绍JSON和JavaScript的区别，然后跳到在浏览器和Node.js项目中用JavaScript解析JSON的不同方法。

JSON和JavaScript之间的区别

虽然JSON看起来像普通的JavaScript，但最好把JSON看作一种数据格式，类似于文本文件。恰好JSON的灵感来自于JavaScript语法，这就是为什么它们看起来如此相似。

让我们来看看JSON对象和JSON数组，并将它们与它们的JavaScript对应物进行比较。

JSON对象与JavaScript对象字面意义（Object Literals）

首先，这里有一个JSON对象:

{
  "name": "Jane Doe",
  "favorite-game": "Stardew Valley",
  "subscriber": false
}

jane-profile.json

JSON对象和普通的JavaScript对象（也叫对象字面 object literal）的主要区别在于引号。JSON对象中的所有键和字符串类型的值都必须用双引号（"）来包裹。

JavaScript对象字面意义更灵活一些。对于对象字面意义，你不需要用双引号来包裹键和字符串。相反，你可以使用单引号（'），或者不对键值使用任何类型的引号。

下面是上面的代码作为一个JavaScript对象字面:

const profile = {
  name: 'Jane Doe',
  'favorite-game': 'Stardew Valley',
  subscriber: false
}

注意，键"'favorite-game'"是用单引号包裹的。对于对象字面，你需要用引号来包装那些由破折号（-）分隔的字的键。

如果你想避免引号，你可以重写键，使用骆驼字母大小写（favoriteGame），或者用下划线来分隔单词（`favorite_game'）。

JSON数组 .vs. JavaScript数组

JSON数组的工作方式与JavaScript中的数组基本相同，可以包含字符串、布尔值、数字和其他JSON对象。比如说:

[
  {
    "name": "Jane Doe",
    "favorite-game": "Stardew Valley",
    "subscriber": false
  },
  {
    "name": "John Doe",
    "favorite-game": "Dragon Quest XI",
    "subscriber": true
  }
]

profiles.json

下面是在普通JavaScript中可能出现的情况:

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

JSON作为一个字符串

你可能会想，如果有JSON对象和数组，你就不能在你的程序中像普通的JavaScript对象字面或数组一样使用它吗？

不能这样做的原因是，JSON实际上只是一个字符串。

例如，当你在一个单独的文件中写JSON时，如上面的jane-profile.json或profiles.json，该文件实际上包含了JSON对象或数组形式的文本，它恰好看起来像JavaScript。

如果你向API发出请求，它将返回类似这样的东西:

{"name":"Jane Doe","favorite-game":"Stardew Valley","subscriber":false}

就像文本文件一样，如果你想在你的项目中使用JSON，你需要把它解析或改变成你的编程语言可以理解的东西。例如，在Python中解析一个JSON对象将创建一个字典。

有了这种理解，让我们看看在JavaScript中解析JSON的不同方法。

如何在浏览器中解析JSON

如果你在浏览器中使用JSON，你可能是通过API接收或发送数据。

让我们看一下几个例子。

如何用fetch解析JSON

从API获取数据的最简单方法是使用fetch，它包括.json()方法，将JSON响应自动解析为可用的JavaScript对象字面或数组。

下面是一些代码，使用 fetch 从对一个对开发者免费的 Chuck Norris Jokes API平台，发出 GET 请求:

fetch('https://api.chucknorris.io/jokes/random?category=dev')
  .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal
  .then(data => console.log(data));

如果你在浏览器中运行这段代码，你会看到像这样的东西记录在控制台中:

{
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
}

虽然这看起来像一个JSON对象，但它实际上是一个JavaScript对象字面，你可以在你的程序中自由使用它。

如何用JSON.stringify()对JSON进行字符串化处理

但是，如果你想把数据发送到API呢？

例如，假设你想发送一个 Chuck Norris 的joke 到 Chuck Norris Jokes API，以便其他人以后可以阅读它。

首先，你要把 joke 写成一个JS对象的字面意思:

const newJoke = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

然后，由于你要向API发送数据，你需要把你的newJoke对象字面意思变成一个JSON字符串。

幸运的是，JavaScript包含了一个超级有用的方法来做到这一点-JSON.stringify():

const newJoke = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

console.log(JSON.stringify(newJoke)); // {"categories":["dev"],"value":"Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."}

console.log(typeof JSON.stringify(newJoke)); // string

虽然我们在这个例子中把一个对象的字面意思转换成JSON字符串，但是JSON.stringify()也适用于数组。

最后，你只需要用POST请求将你的JSON字符串化的 joke 送回给API。

请注意，Chuck Norris joke API 实际上并没有这个功能。但是，如果它有的话，下面是代码可能会出现的情况:

const newJoke = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

fetch('https://api.chucknorris.io/jokes/submit', { // fake API endpoint
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(newJoke), // turn the JS object literal into a JSON string
})
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => {
    console.error(err);
  });

就这样，你用fetch解析了传入的JSON，并使用JSON.stringify()将JSON对象字面意思转换成JSON字符串。

如何在浏览器中处理本地JSON文件

不幸的是，在浏览器中加载一个本地JSON文件是不可能的（或者说是不可取的）。

如果你试图加载一个本地文件，fetch将抛出一个错误。例如，假设你有一个JSON文件，里面有一些 jokes:

[
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
  },
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "ae-78cogr-cb6x9hluwqtw",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/ae-78cogr-cb6x9hluwqtw",
    "value": "There is no Esc key on Chuck Norris' keyboard, because no one escapes Chuck Norris."
  }
]

jokes.json

而你想解析它并在一个简单的HTML页面上创建一个 jokes 列表。

如果你用以下内容创建一个页面并在浏览器中打开它:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />
    <title>Fetch Local JSON</title>
  </head>
  <script>
    fetch("./jokes.json", { mode: "no-cors" }) // disable CORS because path does not contain http(s)
      .then((res) => res.json())
      .then((data) => console.log(data));
  </script>
</html>

index.html

你会在控制台中看到这个:

Fetch API cannot load file://<path>/jokes.json. URL scheme "file" is not supported

默认情况下，出于安全考虑，浏览器不允许访问本地文件。这是一件好事，你不应该试图绕过这种行为。

相反，最好的办法是将本地的JSON文件转换成JavaScript。幸运的是，这很容易，因为JSON的语法与JavaScript非常相似。

你所需要做的就是创建一个新的文件并将你的JSON声明为一个变量:

const jokes = [
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
  },
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "ae-78cogr-cb6x9hluwqtw",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/ae-78cogr-cb6x9hluwqtw",
    "value": "There is no Esc key on Chuck Norris' keyboard, because no one escapes Chuck Norris."
  }
]

jokes.js

并把它作为一个单独的脚本添加到你的页面上:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />
    <title>Fetch Local JSON</title>
  </head>
  <script src="jokes.js"></script>
  <script>
    console.log(jokes);
  </script>
</html>

你将能够在你的代码中自由使用jokes数组。

你也可以使用 JavaScript modules 来做同样的事情，但这有点超出了本文的范围。

但如果你想处理本地的JSON文件，并安装了Node.js，该怎么办？让我们现在来看看如何做到这一点。

如何在Node.js中解析JSON

Node.js是一个JavaScript运行时，允许你在浏览器之外运行JavaScript。你可以在这里阅读关于 Node.js 的所有内容。

无论你是使用Node.js在你的电脑上本地运行代码，还是在服务器上运行整个网络应用，知道如何处理JSON都是很好的。

在下面的例子中，我们将使用同一个jokes.json文件:

[
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
  },
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "ae-78cogr-cb6x9hluwqtw",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/ae-78cogr-cb6x9hluwqtw",
    "value": "There is no Esc key on Chuck Norris' keyboard, because no one escapes Chuck Norris."
  }
]

jokes.json

如何用require()解析一个JSON文件

让我们从最简单的方法开始。

如果你有一个本地的JSON文件，你需要做的就是使用require()来加载它，就像其他Node.js模块。:

const jokes = require('./jokes.json');

JSON文件将自动为你解析，你可以开始在你的项目中使用它:

const jokes = require('./jokes.json');

console.log(jokes[0].value); // "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."

注意，这是同步的，意味着你的程序将停止，直到它解析了整个文件才继续。真正大的JSON文件会导致你的程序变慢，所以要小心处理。

另外，因为用这种方式解析JSON会将整个文件加载到内存中，所以最好对静态JSON文件使用这种方法。如果JSON文件在你的程序运行时发生了变化，你将无法获得这些变化，直到你重新启动你的程序并解析更新的JSON文件。

如何用fs.readFileSync()和JSON.parse()来解析JSON文件

这是在Node.js项目中解析JSON文件的比较传统的方式（因为缺乏更好的术语）--用fs（文件系统）模块读取文件，然后用JSON.parse()进行解析。

让我们看看如何用fs.readFileSync()方法做到这一点。首先，将fs模块添加到你的项目中:

const fs = require('fs');

然后，创建一个新的变量来存储jokes.json文件的输出，并设置它等于fs.readFileSync():

const fs = require('fs');
const jokesFile = fs.readFileSync();

fs.readFileSync()需要几个参数。第一个是你想要读取的文件的路径:

const fs = require('fs');
const jokesFile = fs.readFileSync('./jokes.json');

但如果你现在把jokesFile记录到控制台，你会看到这样的东西:

<Buffer 5b 0a 20 20 7b 0a 20 20 20 20 22 63 61 74 65 67 6f 72 69 65 73 22 3a 20 5b 22 64 65 76 22 5d 2c 0a 20 20 20 20 22 63 72 65 61 74 65 64 5f 61 74 22 3a ... 788 more bytes>

这只是意味着fs模块正在读取文件，但它不知道文件的编码或格式。fs可以用来加载几乎任何文件，而不仅仅是基于文本的文件，如JSON，所以我们需要告诉它文件的编码方式。

对于基于文本的文件，编码通常为 utf8:

const fs = require('fs');
const jokesFile = fs.readFileSync('./jokes.json', 'utf8');

现在如果你把jokesFile记录到控制台，你会看到文件的内容。

但是到目前为止，我们只是在读取文件，而且它还是一个字符串。我们需要使用另一种方法将jokesFile解析为可用的JavaScript对象或数组。

要做到这一点，我们将使用JSON.parse():

const fs = require('fs');
const jokesFile = fs.readFileSync('./jokes.json', 'utf8');
const jokes = JSON.parse(jokesFile);

console.log(jokes[0].value); // "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."

顾名思义，JSON.parse()接收一个JSON字符串，并将其解析为一个JavaScript对象字面或数组（object literal or array）。

和上面的require'方法一样，fs.readFileSync()'是一个同步方法，这意味着如果你的程序正在读取一个大文件，不管是JSON还是其他文件，它可能会导致你的程序变慢。

另外，它只读取一次文件并将其加载到内存中。如果文件有变化，你需要在某个时候再次读取该文件。为了使事情更简单，你可能想创建一个简单的函数来读取文件。

以下是可能出现的情况:

const fs = require('fs');
const readFile = path => fs.readFileSync(path, 'utf8');

const jokesFile1 = readFile('./jokes.json');
const jokes1 = JSON.parse(jokesFile1);

console.log(jokes1[0].value); // "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."

// the jokes.json file changes at some point

const jokesFile2 = readFile('./jokes.json');
const jokes2 = JSON.parse(jokesFile2);

console.log(jokes2[0].value); // "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."

如何用fs.readFile()和JSON.parse()来解析JSON？

fs.readFile()方法与fs.readFileSync()非常相似，只是它是异步工作。如果你有一个大文件要读，而你又不想让它耽误你的其他代码，这就很好。

下面是一个基本的例子:

const fs = require('fs');

fs.readFile('./jokes.json', 'utf8');

到目前为止，这看起来和我们对fs.readFileSync()所做的相似，只是我们没有把它分配给一个像jokesFile这样的变量。因为它是异步的，在fs.readFile()之后的任何代码都会在它完成读取文件之前运行。

相反，我们将使用一个回调函数并解析其中的JSON:

const fs = require('fs');

fs.readFile('./jokes.json', 'utf8', (err, data) => {
  if (err) console.error(err);
  const jokes = JSON.parse(data);

  console.log(jokes[0].value);
});

console.log("This will run first!");

它在控制台中打印出以下内容:

This will run first!
Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris.

就像fs.readFileSync()一样，fs.readFile()将文件加载到内存中，这意味着如果文件有变化，你需要再次读取文件。

另外，尽管fs.readFile()是异步的，但它最终会将它所读取的整个文件加载到内存中。如果你有一个巨大的文件，最好是研究一下 Node.js streams。

如何在Node.js中用JSON.stringify()对JSON进行字符串化

最后，如果你用Node.js解析JSON，很有可能在某些时候需要返回JSON，也许是作为一个API响应。

幸运的是，这与浏览器中的工作方式相同--只需使用JSON.stringify()将JavaScript对象字头或数组转换成JSON字符串:

const newJoke = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

console.log(JSON.stringify(newJoke)); // {"categories":["dev"],"value":"Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."}

就这样了! 我们已经涵盖了关于在浏览器和Node.js项目中使用JSON所需要知道的一切。

现在你可以去解析或字符串化JSON，以满足你的需求。

我还有什么遗漏？你是如何在你的项目中解析JSON的？请在 Twitter 上告诉我。

JSON（JavaScript Object Notation 对象表示法）是一种流行的结构化数据的方式。它被用来在网络应用程序和服务器之间交换信息。但是如何在 Python 中读取一个 JSON 文件呢？

在这篇文章中，我将向你展示如何使用 json.loads() 和 json.load() 方法来解析和读取 JSON 文件和字符串。

JSON 语法

在我们解析和读取 JSON 文件之前，我们首先需要了解基本的语法。JSON 的语法看起来像一个带有键值对的 JavaScript 对象字面。

这是一个 freeCodeCamp 的 JSON 数据的例子。

{
  "organization": "freeCodeCamp",
  "website": "https://www.freecodecamp.org/",
  "formed": 2014,
  "founder": "Quincy Larson",
  "certifications": [
    {
      "name": "Responsive Web Design",
      "courses": [
        "HTML",
        "CSS"
      ]
    },
    {
      "name": "JavaScript Algorithms and Data Structures",
      "courses": [
        "JavaScript"
      ]
    },
    {
      "name": "Front End Development Libraries",
      "courses": [
        "Bootstrap",
        "jQuery",
        "Sass",
        "React",
        "Redux"
      ]
    },
    {
      "name": "Data Visualization",
      "courses": [
        "D3"
      ]
    },
    {
      "name": "Relational Database Course",
      "courses": [
        "Linux",
        "SQL",
        "PostgreSQL",
        "Bash Scripting",
        "Git and GitHub",
        "Nano"
      ]
    },
    {
      "name": "Back End Development and APIs",
      "courses": [
        "MongoDB",
        "Express",
        "Node",
        "NPM"
      ]
    },
    {
      "name": "Quality Assurance",
      "courses": [
        "Testing with Chai",
        "Express",
        "Node"
      ]
    },
    {
      "name": "Scientific Computing with Python",
      "courses": [
        "Python"
      ]
    },
    {
      "name": "Data Analysis with Python",
      "courses": [
        "Numpy",
        "Pandas",
        "Matplotlib",
        "Seaborn"
      ]
    },
    {
      "name": "Information Security",
      "courses": [
        "HelmetJS"
      ]
    },
    {
      "name": "Machine Learning with Python",
      "courses": [
        "Machine Learning",
        "TensorFlow"
      ]
    }
  ]
}

如何在 Python 中解析一个 JSON 字符串

Python 有一个内置的模块，允许你处理 JSON 数据。在你的文件的顶部，你需要导入 json 模块。

import json

如果你需要解析一个返回字典的 JSON 字符串，那么你可以使用 json.loads() 方法。

import json

# assigns a JSON string to a variable called jess 
jess = '{"name": "Jessica Wilkins", "hobbies": ["music", "watching TV", "hanging out with friends"]}'

# parses the data and assigns it to a variable called jess_dict
jess_dict = json.loads(jess)

# Printed output: {"name": "Jessica Wilkins", "hobbies": ["music", "watching TV", "hanging out with friends"]}
print(jess_dict)

如何在 Python 中解析和读取一个 JSON 文件

在这个例子中，我们有一个叫做 fcc.json 的 JSON 文件，它保存了前面关于 freeCodeCamp 所提供的课程的相同数据。

如果我们想读取这个文件，我们首先需要使用 Python 内置的 open() 函数，其模式为读取。我们使用 with 关键字来确保文件被正确关闭。

with open('fcc.json', 'r') as fcc_file:

如果文件不能被打开，那么我们将收到一个 OSError。例如，如果我拼错了 fcc.json 的文件名，将出现 "FileNotFoundError "。

然后我们可以使用 json.load() 方法解析该文件，并将其分配给一个名为 fcc_data 的变量。

 fcc_data = json.load(fcc_file)

最后一步将是打印结果。

print(fcc_data)

完整的代码是这样的：

import json

with open('fcc.json', 'r') as fcc_file:
    fcc_data = json.load(fcc_file)
    print(fcc_data)

如何在 Python 中更好地打印 JSON 数据

如果我们检查打印的数据，那么我们应该看到，JSON 数据全部打印在一行上。

但这可能很难阅读。为了解决这个问题，我们可以使用 json.dumps() 方法，其参数为 indent。

在这个例子中，我们将缩进 4 个空格，以更容易阅读的格式打印数据。

 print(json.dumps(fcc_data, indent=4))

我们还可以使用 sort_keys 参数按字母顺序对键进行排序，并将其设置为 True。

print(json.dumps(fcc_data, indent=4, sort_keys=True))

小结

JSON（JavaScript Object Notation 对象表示法）是一种流行的结构化数据的方式。它被用来在网络应用程序和服务器之间交换信息。

如果你需要解析一个返回字典的 JSON 字符串，那么你可以使用 json.load() 方法。

如果你需要解析一个返回字典的 JSON 文件，那么你可以使用 json.load() 方法。

如果你无法在 JSON 文件中添加评论，理由很简单：JSON 不支持评论。

Douglas Crockford 写到：“我删除了 JSON 中的注释，因为我看到人们正在使用它们制定解析规则，这种做法会破坏互操作性。”他普及了基于文本的数据格式。

但是，有一种解决方法。这就是本文的主题：如何在 JSON 文件中添加注释。

添加数据作为注释

一种解决注释问题的方法是将数据添加到 JSON 文件中，作为注释。

我们来看一个示例，从 JSON 文件中的以下信息开始：

{
   "sport": "basketball",
   "coach": "Joe Smith",
   "wins": 15,
   "losses": 5
}

现在我们添加另一个键值对作为注释，即下方代码的第一行：

{
   "_comment1": "this is my comment",
   "sport": "basketball",
   "coach": "Joe Smith",
   "wins": 15,
   "losses": 5
}

下面是另一个示例。这次，我们用两条下划线作为键的起末：

 "__comment2__": "this is another comment",

下划线有助于将注释与文件中的其他数据区分开。

注意点

需要关注一个重要细节。

我们添加到 JSON 文件的注释包含在 JSON 对象中。换句话说，注释被作为数据。

这是什么意思呢？

这是我们文件中的代码， data.json：

{
   "_comment1": "this is my comment",
   "sport": "basketball",
   "coach": "Joe Smith",
   "wins": 15,
   "losses": 5
}

现在我们从文件中读取数据，read_comments.py：

import json
with open("data.json", mode="r") as j_object:
   data = json.load(j_object)
print(data)

这个结果包含注释：

{'_comment1': 'this is my comment', 'sport': 'basketball', 'coach': 'Joe Smith', 'wins': 15, 'losses': 5}

我们甚至可以从 JSON 对象中提取注释的值：this is my comment：

import json
 
with open("data.json", mode="r") as j_object:
   data = json.load(j_object)
   print(data["_comment1"])

注意这个注释只是开发人员眼中的注释——而不是电脑眼中的。

一种不同形式的注释

这种 JSON 注释方法与 Python 等编程语言中的注释不同，后者通常在程序运行时被忽略。

# Here's my comment
word = "house"
for letter in word:
   print(letter)

当我们运行上面的 Python 程序时，得到单词“ house”，但是看不到评论，它被忽略了。

可以考虑的注释方法

JSMin 是另一种方法。

该工具可从 JavaScript 文件中删除多余的空格和注释，它也适用于 JSON 文件。JSMin 在解析之前从 JSON 文件中删除注释。

所以，在 JSON 文件中添加注释有不同的方法。尽管它们不是完美的解决方案，但至少可以把你需要的文件放在代码中。

原文：JSON Comment Example — How to Comment in JSON Files，作者：Amy Haddad