适用于JavaScript和Node.js的JSON初学者教程

🌊 作者主页：海拥
🌊 简介：🏆CSDN全栈领域优质创作者、🥇HDZ核心组成员、🥈蝉联C站周榜前十
🌊 粉丝福利：粉丝群 每周送6~9本书，不定期送各种小礼品，往期获奖公布

在本教程中，您将学习什么是JSON以及如何在JavaScript和Node.js中使用它。

介绍

在后端和前端之间交换数据的最流行的格式之一是JSON，它用来表示JavaScript对象。它与常规JavaScript对象的外观非常相似，但也有其独特之处。它的读音为“ jason”或“ jay-sun”，所以您可能会听到一些不同的发音。

JSON对其使用的编程语言没有任何限制。您可以在这样的组织中工作：有些后端服务是用Python编写的，有些后端是Java的，前端是JS的，它们都可以完美地交换JSON消息。

以JSON格式存储数据

首先JSON是一个字符串。这允许在需要时进行非常有效的数据压缩。缺点是我们无法存储循环数据结构，例如，引用自身的对象。

（几乎）所有内容都应使用引号引起来

与JavaScript不同，您只应使用双引号并将所有对象属性包装在其中。您不能使用单引号或反引号。

在JS中，我们有一个像这样的对象

{
  name: 'Jack',
  isMarried: false,
  age: 25,
}

而在JSON中，它将变成

{
  "name": "Jack",
  "isMarried": false,
  "age": 25
}

==请注意==：在JavaScript对象中，在逗号后出现逗号age: 25,是可以接受的，但在JSON中则是不允许的。

所有字段名称都用双引号引起来，但并非所有原始值都使用双引号引起来。数字和布尔值不带引号存储。

对象存储在花括号中

像在JS中一样，花括号用于存储对象。

请注意，如果服务器以JSON格式响应，则期望它以对象响应。您不能只列出这些字段。它们都需要用大括号括起来才能成为JSON对象。

数组存储在方括号中

一切都与JS中完全一样，我们将数组的名称用双引号引起来，并且数组本身在方括号中表示。

{
  "pets": ["Rex", "Sandy"]
}

再次注意，该行的末尾没有逗号或分号。

所有JSON对象数据都存储为"key": “value”（“键”：“值”）对

与JS中一样，您只能将对添加key:value到对象。如果需要存储多个不带键的值，则需要一个数组。

将JavaScript对象转换为JSON并返回

要将常规JS对象转换为JSON字符串，您需要此JSON.stringify(obj)函数。无需安装其他模块即可使用。您向其传递一个对象，obj并获得一个JSON对象作为输出。

const user = {
  name: 'Jack',
  isMarried: false,
  age: 25,
}

const userJSON = JSON.stringify(user);
console.log(userJSON); // {"name": "Jack", "isMarried": false, "age": 25}

要从JSON转换为常规对象，我们需要JSON.parse(s)函数。我们以JSON格式的字符串作为输入，并返回一个普通的JS对象。

const jsonString = '{"name": "Jack", "isMarried": false, "age": 25}';
const parsedUser = JSON.parse(jsonString);

console.log(parsedUser); // {name: 'Jack', isMarried: false, age: 25}

Express.js和JSON

如果您不熟悉Express，我将在后续的文章为您讲解：

• 如何创建Express服务器
• 快速中间件和外部访问

由于我们知道JSON对象是一个字符串，因此我们可以非常轻松地修改服务器并发送一些对象而不是Hello, Express.js。

假设我们需要将一个对象传递给前端

{
  name: 'Hero',
  isLearning: true,
  level: 'apprentice',
}

我们将通过几种方式来做到这一点。在所有情况下，前端都会收到相同的内容，您可以在浏览器中通过请求进行验证。

• 普通字符串：

server.get('/', (req, res) => {
  return res.send('{"name": "Hero", "isLearning": true, "level": "apprentice"}');
})

• 对象转换为JSON.stringify：

server.get('/', (req, res) => {
  const user = { name: 'Hero', isLearning: true, level: 'apprentice' };
  return res.send(JSON.stringify(user));
})

• 对象转换为res.json：

server.get('/', (req, res) => {
  const user = { name: 'Hero', isLearning: true, level: 'apprentice' };
  return res.json(user);
})

我会重复一遍。在所有情况下，结果都是相同的。我们发送状态为200和字符串的响应，{"name": "Hero", "isLearning": true,"level": "apprentice"}收件人可以根据需要使用该字符串。

老实说，res.send和res.json之间存在细微差别。如果使用，并且选择，则会设置 一个特殊的标头Content-Type。text/htmlres.sendapplication/jsonres.json

res.json如果您有想要以JSON格式发送的对象，则使用此属性。

第三个示例是最方便的示例，因为我们不执行任何不必要的操作。我们将对象传递给，res.json并在内部进行到JSON字符串的转换。JSON.stringify在这种情况下，不需要像示例2一样对进行额外的（显式）调用。

最后给大家分享一个学习全栈JavaScript的网站：

https://js.coderslang.com/

比较生动有趣的带入性学习